Простой, создайте функцию.
renderBanner: function() {
if (!this.state.banner) return;
return (
<div id="banner">{this.state.banner}</div>
);
},
render: function () {
return (
<div id="page">
{this.renderBanner()}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
Это образец, который я лично соблюдаю все время. Делает код действительно чистым и понятным. Более того, он позволяет вам реорганизовать Banner
в свой собственный компонент, если он становится слишком большим (или повторно используется в других местах).