如何有条件地渲染原因反应组件？

Question

在我的代码中开始出现的很多东西是：

<Parent>
  {if (condition) {
     <Child />;
   } else {
     <div />;
   }}
  <Sibling />
</Parent>;

基本上，我只希望在条件为true的情况下渲染Child，否则什么也不渲染。

将div放在else条件下感觉很不对劲，因为这会导致div确实不应该在那里。如果条件为假，如何有条件地渲染组件而不必渲染不必要的元素？

Answer 1

您必须使用React.null而不是空白的div。

ReasonML强制您在if和else块中使用相同的类型，并且在if块中返回React.element时，还需要在else块中返回一个。

但是，如果您希望代码短一些，则可以使用三进制：

<Parent>
  {condition ? <Child /> : React.null}
  <Sibling />
</Parent>;