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

Posted 2023-02-21

【中文标题】在 React 中，如何将 JSX 与返回更多 JSX 的 JS 函数一起返回？

【英文标题】：In React, How to Return JSX together with JS Function that returns more JSX?

【发布时间】：2019-03-16 23:07:38

【问题描述】：

在渲染选择字段的 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>
    )

【参考方案1】：

试试这个

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

【参考方案2】：

你必须单独渲染它：

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

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

【参考方案3】：

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

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

        </select>

【参考方案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()
]

【参考方案5】：

使用 Fragment 包装选项组件

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