これはどうですか。簡単な支援If
コンポーネントを定義しましょう。
var If = React.createClass({
render: function() {
if (this.props.test) {
return this.props.children;
}
else {
return false;
}
}
});
次のように使用します。
render: function () {
return (
<div id="page">
<If test={this.state.banner}>
<div id="banner">{this.state.banner}</div>
</If>
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
更新:私の答えが人気になっているので、この解決策に関連する最大の危険性について警告する義務があります。別の回答で指摘されているように、<If />
コンポーネント内のコードは、条件が真か偽かに関係なく常に実行されます。したがって、次の例は、banner
isの場合に失敗しnull
ます(2行目のプロパティアクセスに注意してください)。
<If test={this.state.banner}>
<div id="banner">{this.state.banner.url}</div>
</If>
使用する際は注意が必要です。別の(より安全な)アプローチについては、他の回答を読むことをお勧めします。
更新2:振り返ってみると、このアプローチは危険であるだけでなく、必死に面倒です。これは、開発者(私)が知っているパターンとアプローチをある領域から別の領域に転送しようとする典型的な例ですが、実際には機能しません(この場合、他のテンプレート言語)。
条件付き要素が必要な場合は、次のようにします。
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>
);
}
elseブランチも必要な場合は、3項演算子を使用するだけです。
{this.state.banner ?
<div id="banner">{this.state.banner}</div> :
<div>There is no banner!</div>
}
とても短く、よりエレガントで安全です。いつも使っています。唯一の欠点は、else if
分岐を簡単に行うことができないことですが、通常はそれほど一般的ではありません。
とにかく、これはJavaScriptの論理演算子がどのように機能するかによって可能になります。論理演算子は、次のような小さなトリックも許可します。
<h3>{this.state.banner.title || 'Default banner title'}</h3>
else
ブランチがない場合はどうなりますか?私はjsxに詳しくありません...