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

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

正如在回答中已经提到的，JSX为您提供了两个选项

三元运算符 {this.state.price ?< div > {this.state。价格}</div>: null} 逻辑连接 {this.state. price && <div>{this.state. price。价格}< / div >}

但是，对于price == 0，这些不适用。

JSX将在第一种情况下呈现假分支，而在逻辑连接的情况下，将不呈现任何内容。如果该属性可能为0，只需在JSX外部使用If语句即可。

你也可以这样写

{ this.state.banner && <div>{...}</div> }

如果你的州。Banner为空或未定义，则跳过右侧的条件。

我想这一点没有被提及。这就像你自己的答案，但我认为它更简单。您总是可以从表达式中返回字符串，并且可以在表达式中嵌套jsx，因此这允许易于阅读的内联表达式。

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

<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script> <script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script> <script type="text/jsx;harmony=true">void function() { "use strict"; var Hello = React.createClass({ render: function() { return ( <div id="page"> {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''} <div id="other-content"> blah blah blah... </div> </div> ); } }); var element = <div><Hello /><Hello banner="banner"/></div>; React.render(element, document.body); }()</script>

这是一篇关于React中所有条件渲染的不同选项的文章。

何时使用哪种条件渲染的关键要点:

* * if - else

最基本的是条件渲染吗 初学者友好 使用if可以通过返回null提早退出渲染方法

**三元运算符

在if-else语句外使用它 它比if-else更简洁

逻辑&&运算符

当三元操作的一侧返回null时使用它

**开关箱

详细的 只能内联自调用函数 避免使用枚举

** 枚举

完美地映射不同的州 完美地映射不止一个条件

**多级/嵌套条件渲染

为了可读性，避免使用它们 将组件拆分为具有自己的简单条件呈现的更轻量级的组件 使用的

** HOC

使用它们来屏蔽条件呈现 组件可以专注于它们的主要用途

**外部模板组件

避免使用它们，熟悉JSX和JavaScript

If样式组件是危险的，因为无论条件如何，代码块总是被执行。例如，如果banner为空，这将导致一个空异常:

//dangerous
render: function () {
  return (
    <div id="page">
      <If test={this.state.banner}>
        <img src={this.state.banner.src} />
      </If>
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

另一种选择是使用内联函数(对else语句特别有用):

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

react问题的另一个选项:

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