你也可以这样写

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

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

这个呢?让我们定义一个简单的帮助If组件。

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

然后这样用:

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

更新:随着我的答案越来越受欢迎，我觉得有义务警告你这个解决方案的最大危险。正如在另一个回答中指出的那样，无论条件是真还是假，<If />组件中的代码总是被执行。因此，如果横幅为空，下面的例子将失败(注意第二行上的属性访问):

<If test={this.state.banner}>
    <div id="banner">{this.state.banner.url}</div>
</If>

你使用它的时候一定要小心。我建议你阅读其他的(更安全的)方法。

更新2:回头看，这种方法不仅危险，而且极其繁琐。这是一个典型的例子，当一个开发人员(我)试图将他知道的模式和方法从一个领域转移到另一个领域，但它实际上不起作用(在这种情况下是其他模板语言)。

如果你需要一个条件元素，可以这样做:

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

如果你还需要else分支，只需使用三元操作符:

{this.state.banner ?
   <div id="banner">{this.state.banner}</div> :
   <div>There is no banner!</div>
}

它更短，更优雅，更安全。我一直在用它。唯一的缺点是，如果分支那么容易，你就不能做其他事情，但这通常不常见。

无论如何，这是可能的，这要感谢JavaScript中的逻辑运算符的工作方式。逻辑运算符甚至允许这样的小技巧:

<h3>{this.state.banner.title || 'Default banner title'}</h3>

下面是我使用ES6的方法。

import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      opened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { opened } = this.state;
    this.setState({
      // toggle value of `opened`
      opened: !opened,
    });
  }

  render() {
    const { title, children } = this.props;
    const { opened } = this.state;
    return (
      <div className="box">
        <div className="boxTitle" onClick={this.toggleBox}>
          {title}
        </div>
        {opened && children && (
          <div class="boxContent">
            {children}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render((
  <ToggleBox title="Click me">
    <div>Some content</div>
  </ToggleBox>
), document.getElementById('app'));

演示:http://jsfiddle.net/kb3gN/16688/

我使用的代码如下:

{opened && <SomeElement />}

仅当opened为true时才会呈现SomeElement。它的工作原理在于JavaScript解析逻辑条件的方式:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise

由于React会忽略false，我发现它是有条件渲染某些元素的好方法。

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

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

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

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

* * if - else

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

**三元运算符

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

逻辑&&运算符

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

**开关箱

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

** 枚举

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

**多级/嵌套条件渲染

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

** HOC

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

**外部模板组件

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

我使用一个更显式的快捷方式:立即调用函数表达式(IIFE):

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}