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

Question

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

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

基本上，我只希望在Child条件为true时渲染，否则不渲染任何东西。

将divelse 置于else条件中感觉不对，因为这会使a div确实不应该存在。如果条件为假，如何有条件地渲染组件而不必渲染不必要的元素？

Answer 1

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

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

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

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