还有一个非常简洁的单行版本……{this.props.product.title || "No Title"}

Ie:

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

大多数例子都只有一行“html”，是有条件呈现的。当我有多行需要有条件地呈现时，这对我来说似乎是可读的。

render: function() {
  // This will be renered only if showContent prop is true
  var content = 
    <div>
      <p>something here</p>
      <p>more here</p>
      <p>and more here</p>
    </div>;

  return (
    <div>
      <h1>Some title</h1>

      {this.props.showContent ? content : null}
    </div>
  );
}

第一个例子很好，因为我们可以有条件地呈现一些其他内容，如{this.props。showContent吗?内容:otherContent}

但如果你只是需要显示/隐藏内容，这是更好的，因为布尔值，Null和Undefined被忽略

render: function() {
  return (
    <div>
      <h1>Some title</h1>

      // This will be renered only if showContent prop is true
      {this.props.showContent &&
        <div>
          <p>something here</p>
          <p>more here</p>
          <p>and more here</p>
        </div>
      }
    </div>
  );
}

你可以像这样使用三元运算符有条件地包含元素:

render: function(){

         return <div id="page">

                  //conditional statement
                  {this.state.banner ? <div id="banner">{this.state.banner}</div> : null}

                  <div id="other-content">
                      blah blah blah...
                  </div>

               </div>
}

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

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

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

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

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

实验性的ES7 do语法使这很容易。如果你正在使用Babel，启用es7。doExpressions特性然后:

render() {
  return (
    <div id="banner">
      {do {
        if (this.state.banner) {
          this.state.banner;
        } else {
          "Something else";
        }
      }}
    </div>
  );
}

见http://wiki.ecmascript.org/doku.php?id=strawman: do_expressions