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>
)

阅读资源： 掘金 - 精读《React 八种条件渲染》