1. ホーム
  2. ジャバスクリプト

[解決済み】Facebook ReactのJSXで条件付き要素を持ち、DRYを維持する方法とは?

2022-04-04 09:53:09

質問

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>
    );
}

解決方法は?

バナーをundefinedのままにしておくと、バナーが含まれないようになります。