我如何选择在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>
);
}
当前回答
还有另一个解决方案，if组件的React:
var Node = require('react-if-comp');
...
render: function() {
return (
<div id="page">
<Node if={this.state.banner}
then={<div id="banner">{this.state.banner}</div>} />
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
其他回答
只是为了扩展@Jack Allan的回答，引用文档。
React基本(快速入门)文档建议在这种情况下为null。 然而，布尔值、Null和Undefined也会被忽略，详见高级指南。
我只是在React with TypeScript中使用了下面的代码片段
export default function ReactIf(props: {condition: boolean, children: React.ReactNode }) {
return props.condition ? <React.Fragment>{props.children}</React.Fragment> : <React.Fragment/>;
}
If样式组件是危险的，因为无论条件如何，代码块总是被执行。例如，如果banner为空，这将导致一个空异常:
//dangerous
render: function () {
return (
<div id="page">
<If test={this.state.banner}>
<img src={this.state.banner.src} />
</If>
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
另一种选择是使用内联函数(对else语句特别有用):
render: function () {
return (
<div id="page">
{function(){
if (this.state.banner) {
return <div id="banner">{this.state.banner}</div>
}
}.call(this)}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
react问题的另一个选项:
render: function () {
return (
<div id="page">
{ this.state.banner &&
<div id="banner">{this.state.banner}</div>
}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
当你在"if"分支中有多个元素时，这个组件可以工作:
var Display = React.createClass({
render: function () {
if (!this.props.when) {
return false;
}
return React.DOM.div(null, this.props.children);
},
});
用法:
render: function() {
return (
<div>
<Display when={this.state.loading}>
Loading something...
<div>Elem1</div>
<div>Elem2</div>
</Display>
<Display when={!this.state.loading}>
Loaded
<div>Elem3</div>
<div>Elem4</div>
</Display>
</div>
);
}
附注:有些人认为这些组件不适合代码阅读。但在我看来，Html和javascript更糟糕
实验性的ES7 do语法使这很容易。如果你正在使用Babel，启用es7。doExpressions特性然后:
render() {
return (
<div id="banner">
{do {
if (this.state.banner) {
this.state.banner;
} else {
"Something else";
}
}}
</div>
);
}
见http://wiki.ecmascript.org/doku.php?id=strawman: do_expressions
