Question

在某些情况下，你希望根据某些状态渲染不同的组件。 JSX 不会渲染 false 或 undefined ，因此你可以使用 && 运算符，在某个条件为 true 时，渲染组件中指定的内容。

const MyComponent = ({ name, address }) => (
<div>
  <h2>{name}</h2>
  {address &&
    <p>{address}</p>
  }
</div>
)

如果你需要一个 if-else 条件，那么使用三元运算符：

const MyComponent = ({ name, address }) => (
<div>
  <h2>{name}</h2>
  {address
    ? <p>{address}</p>
    : <p>{'Address is not available'}</p>
  }
</div>
)

阅读资源：

1. 掘金 - 精读《React 八种条件渲染》