Как условно отобразить разумно-реагирующий компонент?

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>;