Question

在一个React组件中，该组件呈现一个select字段，其中的选项由组件函数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>

Answer 2

您必须单独渲染它：

{!this.props.usersAreLoading && <option value=""></option>}

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

Answer 3

最简单的方法（也许不是最优雅的方法）是使用两个条件

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

        </select>

Answer 4

由于三元“ 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()
]}

Answer 5

使用片段包装选项组件

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

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

5 个答案: