reactjs - 如何检查 React 元素是否会渲染任何内容

Question

假设我正在制作一个包装器组件，该组件仅在传入某些子节点时才呈现自身:

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

问题是 children 可能是一个包含 null 的 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>
}