我如何选择在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>
);
}
当前回答
我想这一点没有被提及。这就像你自己的答案，但我认为它更简单。您总是可以从表达式中返回字符串，并且可以在表达式中嵌套jsx，因此这允许易于阅读的内联表达式。
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>
);
}
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script> <script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script> <script type="text/jsx;harmony=true">void function() { "use strict"; var Hello = React.createClass({ render: function() { return ( <div id="page"> {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''} <div id="other-content"> blah blah blah... </div> </div> ); } }); var element = <div><Hello /><Hello banner="banner"/></div>; React.render(element, document.body); }()</script>
其他回答
正如在回答中已经提到的，JSX为您提供了两个选项
三元运算符 {this.state.price ?< div > {this.state。价格}</div>: null} 逻辑连接 {this.state. price && <div>{this.state. price。价格}< / div >}
但是，对于price == 0，这些不适用。
JSX将在第一种情况下呈现假分支，而在逻辑连接的情况下，将不呈现任何内容。如果该属性可能为0，只需在JSX外部使用If语句即可。
我只是在React with TypeScript中使用了下面的代码片段
export default function ReactIf(props: {condition: boolean, children: React.ReactNode }) {
return props.condition ? <React.Fragment>{props.children}</React.Fragment> : <React.Fragment/>;
}
我使用一个更显式的快捷方式:立即调用函数表达式(IIFE):
{(() => {
if (isEmpty(routine.queries)) {
return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
} else if (this.state.configured) {
return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
} else {
return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
}
})()}
就我个人而言，我真的认为(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>
你可以使用一个函数并返回组件，同时保持渲染函数的精简
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 />
}
}
}
