reason - 如何有条件地呈现原因 react 组件？

Question

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

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

基本上我只想要 Child如果条件为真则渲染，否则不渲染。

放 div感觉不对在 else 条件下，因为这会呈现 div那真的不应该在那里。如果条件为假，如何有条件地呈现组件而不必呈现不必要的元素？

Answer 1

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

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

但是，如果您希望代码更短一些，则可以使用三元:

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