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

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

\n\n

\n

false、null、undefined 和 true 是有效的子项。他们只是不渲染xe2x80x99t。这些 JSX 表达式将全部呈现为相同的内容：

\n

\n\n

<div />\n\n<div></div>\n\n<div>{false}</div>\n\n<div>{null}</div>\n\n<div>{undefined}</div>\n\n<div>{true}</div>\n

\n