javascript - 在 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>
    )
}

标签： javascriptreactjsjsx

Answer 1

由于三元 'else' 应该包含多个元素，它们可以用React.Fragment:

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

或作为单个数组提供：

{this.props.usersAreLoading ? (
  <option value="">Loading...</option>
) : [
  <option value=""></option>,
  this.renderOptions()
]}