React中的条件渲染

条件渲染

Vue：设置show-if属性

React：使用JavaScript操作符来创建渲染当然状态的元素，并让React更新匹配的UI

方法一：if…else…语句

return不同的组件（当需要条件渲染组件的一部分，其他部分固定，无法直接return时，可以利用变量存储元素，进而渲染该变量）

方法二：使用逻辑 && 操作符的内联 if 用法

在 JavaScript 中， true && expression 总是会评估为 expression ，而 false && expression 总是执行为 false 。
因此，如果条件为 true ，则 && 后面的元素将显示在输出中。 如果是 false，React 将会忽略并跳过它。

方法三：### 使用条件操作符的内联 If-Else

另一个用于条件渲染元素的内联方法是使用 JavaScript 的条件操作符

防止组件渲染

在极少数情况下，您可能希望组件隐藏自身，即使它是由另一个组件渲染的。为此，返回 null 而不是其渲染输出。

在下面的例子中，根据名为warn的 prop 值，呈现 。如果 prop 值为 false ，则该组件不渲染：

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    

      Warning!
    
  );
}

从组件的 render 方法返回 null 不会影响组件生命周期方法的触发。 例如， componentWillUpdate 和 componentDidUpdate 仍将被调用。