在React中，如何同时返回JSX和返回更多JSX的JS函数？
在React中，如何同时返回JSX和返回更多JSX的JS函数？
提问于 2018-10-12 03:10:10
在一个用组件函数renderOptions()动态创建的选项呈现选择字段的React组件中，我们如何也呈现一个空的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>
)
}回答 5
Stack Overflow用户
发布于 2018-10-12 03:17:43
尝尝这个
<select>
{ this.props.usersAreLoading
&& <option value="">Loading...</option> }
{!this.props.usersAreLoading && <option value=""></option>}
{!this.props.usersAreLoading && this.renderOptions()}
</select>Stack Overflow用户
发布于 2018-10-12 03:18:15
你必须单独渲染它：
{!this.props.usersAreLoading && <option value=""></option>}
{this.props.usersAreLoading
? <option value="">Loading...</option>
: this.renderOptions()
} Stack Overflow用户
发布于 2018-10-12 03:23:07
最简单的方法(可能不是最优雅的)是使用两个条件
<select>
{ this.props.usersAreLoading
? <option value="">Loading...</option>
: <option value=""></option>
}
{!this.props.usersAreLoading && this.renderOptions()
}
</select>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52767304
复制相关文章
相似问题
腾讯云开发者
