如何在 Facebook React 的 JSX 中使用条件元素并保持 DRY? [英] How to have conditional elements and keep DRY with Facebook React's JSX?

问题描述

如何在 JSX 中选择性地包含一个元素?这是一个使用横幅的示例，如果它已传入，则该横幅应位于组件中.我想避免的是必须在 if 语句中重复 HTML 标记.

render: function () {var 横幅；如果(this.state.banner){横幅 = <div id="banner">{this.state.banner}</div>;} 别的 {横幅 = ?????}返回 (<div id="页面">{横幅}<div id="其他内容">等等等等等等...

);}

解决方案

只要将横幅保留为未定义，它就不会被包含在内.

How do I optionally include an element in JSX? Here is an example using a banner that should be in the component if it has been passed in. What I want to avoid is having to duplicate HTML tags in the if statement.

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

解决方案

Just leave banner as being undefined and it does not get included.

这篇关于如何在 Facebook React 的 JSX 中使用条件元素并保持 DRY?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！