reactjs - 如何检查 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

无需检查。他们根本不渲染.

false、null、undefined 和 true 是有效的子级。他们根本不渲染。这些 JSX 表达式都将渲染为同一事物：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Answer 2

也许这就是你要找的：

import ReactDOMServer from 'react-dom/server';

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

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