我如何选择在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>
    );
}

当前回答

还有另一个解决方案,if组件的React:

var Node = require('react-if-comp');
...
render: function() {
    return (
        <div id="page">
            <Node if={this.state.banner}
                  then={<div id="banner">{this.state.banner}</div>} />
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

其他回答

就我个人而言,我真的认为(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>

我喜欢立即调用函数表达式(IIFE)和if-else的显式呈现回调和三元运算符。

render() {
  return (
    <div id="page">
      {(() => (
        const { banner } = this.state;
        if (banner) {
          return (
            <div id="banner">{banner}</div>
          );
        }
        // Default
        return (
          <div>???</div>
        );
      ))()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

你只需要熟悉IIFE语法,{expression}是常用的React语法,在它里面,你只需要考虑你正在编写一个调用自己的函数。

function() {

}()

需要用括号来包装

(function() {

}())

我最近创建了https://github.com/ajwhite/render-if,以便仅在谓词通过时安全地呈现元素。

{renderIf(1 + 1 === 2)(
  <span>Hello!</span>
)}

or

const ifUniverseIsWorking = renderIf(1 + 1 === 2);

//...

{ifUniverseIsWorking(
  <span>Hello!</span>
)}

我做了https://www.npmjs.com/package/jsx-control-statements,让它更简单一点,基本上它允许你定义<If>条件作为标签,然后将它们编译成三元If,这样<If>中的代码只有在条件为真时才会执行。

只是为了扩展@Jack Allan的回答,引用文档。

React基本(快速入门)文档建议在这种情况下为null。 然而,布尔值、Null和Undefined也会被忽略,详见高级指南。