Как проверить, будет ли элемент React отображать что-либо

Question

Скажем, я делаю компонент-обертку, который должен отображаться сам, только если передаются некоторые дочерние узлы:

const Wrapper = ({children}) => {
  if (!children) return null
  return <div>{children}</div>
}

Проблема в том, что children может быть Fragment, содержащим ноль, илимассив нулей. Или фрагмент, содержащий фрагмент, содержащий ...

<Wrapper>hey</Wrapper> // renders <div>hey</div> ?
<Wrapper>{null}</Wrapper> // renders nothing ?
<Wrapper>{[null]}</Wrapper> // renders <div/> ?
<Wrapper><React.Fragment>{null}</React.Fragment></Wrapper> // renders <div/> ?

Есть ли канонический способ проверить все эти условия?

Answer 1

Может быть, это то, что вы ищете:

import ReactDOMServer from 'react-dom/server';

const Wrapper = ({children}) => {
  const markup = ReactDOMServer.renderToStaticMarkup(children);
  if (!markup.trim()) return null;

  return <div>{children}</div>
}

Answer 2

Не нужно проверять. Они просто не отображают .

false, null, undefined и true являются допустимыми дочерними элементами. Они просто не рендерится. Все эти выражения JSX будут отображаться одинаково:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>