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

Question

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

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

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

div将 the置于 else 条件感觉是错误的，因为这会导致 adiv真的不应该存在。如果条件为假，我如何有条件地渲染组件而不必渲染不必要的元素？

Answer 1

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

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

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

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