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

Question

已经开始出现在我的代码中的一些东西是：

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

基本上我只希望 Child 在条件为真时渲染，否则什么都不渲染。

将 div 置于 else 条件中感觉不对，因为这会呈现一个 div 实际上不应该存在的状态。如果条件为假，我如何有条件地渲染组件而不必渲染不必要的元素？

Answer 1

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

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

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

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

How to conditionally render reason-react component?