条件渲染 （二）

• 与运算符&&

  xxxxxxxxxx
   const flag=true
   return flag && <div>生存吧</div>
  

  xxxxxxxxxx
   const flag=true
  return <div>
      {flag && "生存吧"}
    </div>
  

  提示：

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

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

• 使用null

  如果返回null，则React什么都不渲染

  xxxxxxxxxx
   const flag=true
  return {flag ?<div>生存吧</div> :null}
      
  

实时效果反馈

1. 下列运行结果是：

xxxxxxxxxx
 const flag=true
return <div>
    {flag && "生存吧"}
  </div>

A 不渲染

B 报错

C 生存吧

D 毁灭吧

答案

1=>C