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

Question

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

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

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

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