在React中,如何将JSX与返回更多JSX的JS函数一起返回？

Question

在React组件中呈现一个选择字段,其中选项由组件函数动态创建renderOptions(),我们如何才能将空option元素(例如:) <option value=""></option>作为第一个选项呈现？

在添加空之前反应代码 <option>

renderOptions() {
    return (
        this.props.users.map(user => (
            <option key={ user._id } value={ user._id }>{ user.name }</option>
        ))
    )
}


render() {
    return (
        <div>
            <div className="someDiv"></div>

            <select>
                { this.props.usersAreLoading 
                    ? <option value="">Loading...</option> 
                    : this.renderOptions()
                }            
            </select>
        </div>
    )
}

尝试失败

render() {
    return (
        <div>
            <div className="someDiv"></div>

            <select>
                { this.props.usersAreLoading 
                    ? <option value="">Loading...</option> 
                    : <option value=""></option> this.renderOptions()
                }            
            </select>
        </div>
    )
}

Answer 1

尝试这个

 <select>
        { this.props.usersAreLoading 
                && <option value="">Loading...</option> }
        {!this.props.usersAreLoading && <option value=""></option>} 
        {!this.props.usersAreLoading && this.renderOptions()}           
   </select>