查看react Docs 中的If-Else in JSX部分。

在 JSX 中，您不能将语句放在花括号中——只有表达式。如果您不知道 JavaScript 中表达式与语句之间的区别，请阅读这篇文章。此限制是因为 JSX 将糖化为函数调用，并且您不能将 if 语句用作 JavaScript 中函数的参数。但是，您可以使用布尔运算符（&&,||和? :）来完成类似的工作。它们是表达式，因此它们可以放入 JSX 生成的构造函数调用中，并且它们的短路评估与 if 语句中使用的评估相同。

<div>
    {(true
        ? <div>Showing true item</div>     
        : <div>Never showing false item</div>
    )}
</div>
<p>My name is {this.name || "default name"}</p>

此外，React 会将null和false视为不会在真实 DOM 中呈现的“空组件”（目前它在幕后使用相同的 noscript 技巧）。当您不想要“else”分支时，这很有用。有关详细信息，请参阅JSX 中的 False。

<div>
    {shouldIncludeChild ? <ChildComponent/> : false}
</div>

至于您询问的 If 组件，它存在的一个问题是，在当前形式下，即使条件为假，它也会评估其子项。当 If 的主体仅在条件为真时才有意义时，这可能会导致错误：

<If condition={person !== null}>
    //This code throws an exception if this.person is null
    <div>{person.name}</div>
</If>

您可以通过让 if 组件将主体作为函数而不是子组件列表接收但它更冗长来解决此问题：

<If condition={person !== null} body={function(){
    return <div>{person.name}</div>
}/>

最后，由于 If 组件是无状态的，您应该考虑使用普通函数而不是新的组件类，因为这将使“If”对 React 的协调算法透明。如果您使用 If 组件，则 a<div>和 a<If><div>将被视为不兼容，React 将进行完整的重绘，而不是尝试将新组件与旧组件合并。

// This custom if function is for purely illustrative purposes
// However, this idea of using callbacks to represent block of code
// is useful for defining your own control flow operators in other circumstances.
function myCustomIf(condition, onTrue, onFalse){
    onTrue  = onTrue  || function(){ return null }        
    onFalse = onFalse || function(){ return null }
    if(condition){
        return onTrue();
    }else{
        return onFalse();
    }
}

<div>    
    {myCustomIf(person !== null, function(){
         return <div>{person.name}</div>
     })}
</div>

除了普通的 JS，你不需要任何东西。

安全和可读（但冗长）

maybeRenderPerson: function() {
    var personName = ...;
    if ( personName ) {
        return <div className="person">{personName}</div>;
    }
}

render: function() {
    return (
       <div className="component">
          {this.maybeRenderPerson()}
       </div>
    );
}

它有点冗长，但它允许轻松地将您的逻辑拆分为更小、更集中的块。当组件开始变得复杂时，这是最易读的。

简洁易读（但危险）

render: function() {
    var personName = ...; // present or absent name, but never ""
    return (
       <div className="component">
          {personName && (
            <div className="person">{personName}</div>
          )}
       </div>
    );
}

如果被测试的变量可能是假值，如0,""或，则此语法可能非常危险false。特别是对于数字，如果你想确保它呈现为 0，你应该稍微修改测试：

render: function() {
    var counter= ...; // number, can be 0
    return (
       <div className="component">
          {(typeof counter !== 'undefined') && (
            <div className="counter">{counter}</div>
          )}
       </div>
    );
}

当组件变得复杂时，将其拆分为多个较小的组件并采用代码样式约定有助于保持其可读性：

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

现代语法（但为时过早）

do具有功能性无状态组件的符号对于表达性很有用而不会失去可读性。您可以使用以下do符号轻松地将大型组件拆分为非常小且重点突出的组件：

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}/>
}

这有点像在 JSX 中使用module模式，所以它非常灵活，但样板文件少得多。

要启用此功能，您需要 ES7 阶段 0 编译工具，并且您最喜欢的 IDE 可能尚不提供支持。

您可以像这样执行内联条件

{true && (
<div>render item</div>
)}

{false && (
<div>don't render item</div>
)}

或者你可以只使用一个 var

var something;

if (true) {
something = <div>render item</div>
}

{something}

您也可以使用正确的上下文执行自动执行功能（尽管在 Babel 的帮助下）！我更喜欢这样做，因为不需要分配变量，而且您可以随心所欲地复杂化（尽管为了可维护性，您可能不应该这样做）：

render() {
  return (
    <div>
      <div>Hello!</div>
      {() => {
        if (this.props.isLoggedIn) {
          return <Dashboard />
        } else {
          return <SignIn />
        }
      }()}
      <div>Another Tag</div>
    </div>
  );
}

实验性 ES7do语法非常适合这种情况。如果您使用 Babel，请启用该es7.doExpressions功能，然后：

render() {
  var condition = false;

  return (
    <div>
      {do {
        if (condition) {
          <span>Truthy!</span>;
        } else {
          <span>Not truthy.</span>;
        }
      }}
    </div>
  );
}

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