&& +代码风格+小组件

对我来说，这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值，如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”组件…好主意?

当你在"if"分支中有多个元素时，这个组件可以工作:

var Display = React.createClass({
  render: function () {
    if (!this.props.when) {
      return false;
    }
    return React.DOM.div(null, this.props.children);
  },
});

用法:

render: function() {
  return (
    <div>
      <Display when={this.state.loading}>
        Loading something...
        <div>Elem1</div>
        <div>Elem2</div>
      </Display>
      <Display when={!this.state.loading}>
        Loaded
        <div>Elem3</div>
        <div>Elem4</div>
      </Display>
    </div>
  );
}

附注:有些人认为这些组件不适合代码阅读。但在我看来，Html和javascript更糟糕

这个呢?让我们定义一个简单的帮助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>

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

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

or

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

//...

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

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

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

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