实验性的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

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

&& +代码风格+小组件

对我来说，这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值，如false、0或""。

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

做记号

ES7 stage-0 do符号语法也非常好，当我的IDE正确支持它时，我肯定会使用它:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

更多细节在这里:创建一个“If”组件…好主意?

我只是在React with TypeScript中使用了下面的代码片段

export default function ReactIf(props: {condition: boolean, children: React.ReactNode }) {
    return props.condition ? <React.Fragment>{props.children}</React.Fragment> : <React.Fragment/>;
}

很简单，创建一个函数。

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

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

这是我个人一直遵循的模式。使代码非常干净，易于理解。更重要的是，如果Banner变得太大(或在其他地方重用)，它允许你将其重构到自己的组件中。

下面是我使用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，我发现它是有条件渲染某些元素的好方法。