javascript - 在 React 中，如何返回 JSX 以及返回更多 JSX 的 JS 函数？

Question

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

在添加空 <option> 之前 react 代码

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>