我如何选择在JSX中包含一个元素?下面是一个使用横幅的例子，如果它已经被传入，那么它应该在组件中。我想避免的是在if语句中重复HTML标记。
render: function () {
var banner;
if (this.state.banner) {
banner = <div id="banner">{this.state.banner}</div>;
} else {
banner = ?????
}
return (
<div id="page">
{banner}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
当前回答
当必须只渲染某些东西，如果传递的条件是完全满足的，你可以使用语法:
{ condition && what_to_render }
这种方式的代码看起来像这样:
render() {
const { banner } = this.state;
return (
<div id="page">
{ banner && <div id="banner">{banner}</div> }
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
当然，还有其他有效的方法来做到这一点，这完全取决于偏好和场合。如果你感兴趣，你可以在本文中学习更多如何在React中进行条件渲染的方法!
其他回答
我喜欢立即调用函数表达式(IIFE)和if-else的显式呈现回调和三元运算符。
render() {
return (
<div id="page">
{(() => (
const { banner } = this.state;
if (banner) {
return (
<div id="banner">{banner}</div>
);
}
// Default
return (
<div>???</div>
);
))()}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
你只需要熟悉IIFE语法，{expression}是常用的React语法，在它里面，你只需要考虑你正在编写一个调用自己的函数。
function() {
}()
需要用括号来包装
(function() {
}())
你可以使用一个函数并返回组件，同时保持渲染函数的精简
class App extends React.Component {
constructor (props) {
super(props);
this._renderAppBar = this._renderAppBar.bind(this);
}
render () {
return <div>
{_renderAppBar()}
<div>Content</div>
</div>
}
_renderAppBar () {
if (this.state.renderAppBar) {
return <AppBar />
}
}
}
&& +代码风格+小组件
对我来说，这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值，如false、0或""。
render: function() {
var person= ...;
var counter= ...;
return (
<div className="component">
{person && (
<Person person={person}/>
)}
{(typeof counter !== 'undefined') && (
<Counter value={counter}/>
)}
</div>
);
}
做记号
ES7 stage-0 do符号语法也非常好，当我的IDE正确支持它时，我肯定会使用它:
const Users = ({users}) => (
<div>
{users.map(user =>
<User key={user.id} user={user}/>
)}
</div>
)
const UserList = ({users}) => do {
if (!users) <div>Loading</div>
else if (!users.length) <div>Empty</div>
else <Users users={users}/>
}
更多细节在这里:创建一个“If”组件…好主意?
还有一种技术使用渲染道具对组件进行条件渲染。它的好处是，在条件满足之前，渲染不会计算，因此不需要担心null和未定义的值。
const Conditional = ({ condition, render }) => {
if (condition) {
return render();
}
return null;
};
class App extends React.Component {
constructor() {
super();
this.state = { items: null }
}
componentWillMount() {
setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
}
render() {
return (
<Conditional
condition={!!this.state.items}
render={() => (
<div>
{this.state.items.map(value => <p>{value}</p>)}
</div>
)}
/>
)
}
}
就我个人而言，我真的认为(JSX in Depth)中显示的三元表达式是符合ReactJs标准的最自然的方式。
示例如下。乍一看有点乱，但效果很好。
<div id="page">
{this.state.banner ? (
<div id="banner">
<div class="another-div">
{this.state.banner}
</div>
</div>
) :
null}
<div id="other-content">
blah blah blah...
</div>
</div>
