React：条件渲染（三目运算符）

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

• 三目运算符

在 JSX 内部不能使用 if else 语句，但可以使用 三元运算 表达式来替代

condition ? true : false

var i = 10;
ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
      {i > 0 ? <div className="box"></div> : '' }  
    </div>,
    document.getElementById('example')
);

 

• 可以在JSX外部使用if语句

• var i = 10;
  if(i > 0){ //使用if语句的好处是：如果条件不满足且不需要渲染组件时不需要写else
      box = <div className="box"></div>;
  }
  ReactDOM.render(
      <div>
        { box }
      </div>,
      document.getElementById('example')
  );

   

与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染：

JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。