jsx 在布尔条件下显示页面变化

Question

如果 var userConnected 的状态为真，我希望在我的主页上显示参数和断开连接，如果 userConnected 的状态为假，则只显示登录和注册。

如果用户未连接，我想先看 2 个，如果用户已连接，我想先看另外 2 个。

我不知道该怎么做，它类似于一个取决于布尔值的变体页面。

Answer 1

整个 JSX 结构本质上只是一个表达式，您可以使用三元条件运算符引入表达式的条件部分。在 JSX 中可能看起来像这样：

<Parent>
  {
    someBoolean ?
      <Child1 /> :
      <Child2 />
  }
</Parent>

当然，<Child1 /> 或 <Child2 /> 本身可以是一个完整的 JSX 元素树，并且可以在其中有更多的条件表达式等。（或者可以只是 null if你不想为给定条件渲染任何东西。）但结构仍然相同。