條件渲染

Vue：設(shè)置show-if屬性

React：使用JavaScript操作符來(lái)創(chuàng)建渲染當(dāng)然狀態(tài)的元素，并讓React更新匹配的UI

方法一：if…else…語(yǔ)句

return不同的組件（當(dāng)需要條件渲染組件的一部分，其他部分固定，無(wú)法直接return時(shí)，可以利用變量存儲(chǔ)元素，進(jìn)而渲染該變量）

方法二：使用邏輯 && 操作符的內(nèi)聯(lián) if 用法

在 JavaScript 中， true && expression 總是會(huì)評(píng)估為 expression ，而 false && expression 總是執(zhí)行為 false 。
因此，如果條件為 true ，則 && 后面的元素將顯示在輸出中。 如果是 false，React 將會(huì)忽略并跳過(guò)它。

方法三：### 使用條件操作符的內(nèi)聯(lián) If-Else

另一個(gè)用于條件渲染元素的內(nèi)聯(lián)方法是使用 JavaScript 的條件操作符

防止組件渲染

在極少數(shù)情況下，您可能希望組件隱藏自身，即使它是由另一個(gè)組件渲染的。為此，返回 null 而不是其渲染輸出。

在下面的例子中，根據(jù)名為warn的 prop 值，呈現(xiàn) <WarningBanner /> 。如果 prop 值為 false ，則該組件不渲染：

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

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

從組件的 render 方法返回 null 不會(huì)影響組件生命周期方法的觸發(fā)。 例如， componentWillUpdate 和 componentDidUpdate 仍將被調(diào)用。