如何检查 React 元素是否会渲染任何内容答案

【问题标题】：How to check if a React element will render anything如何检查 React 元素是否会渲染任何内容
【发布时间】：2020-01-29 14:45:16
【问题描述】：

假设我正在制作一个包装器组件，它应该只在传入一些子节点时才呈现自己：

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

是否有检查所有这些条件的规范方法？

【问题讨论】：

你能详细描述一个场景吗？
你添加一个div id，通过它你可以检查该id的组件是否已经渲染
您必须对children 进行更多检查，例如它是否是一个数组，并相应地进行渲染。

标签： reactjs react-fragment

【解决方案1】：

无需检查。他们只是don't render。

false、null、undefined 和 true 是有效的子代。他们根本不渲染。这些 JSX 表达式都会渲染到同一个东西：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

【讨论】：

孩子们不会渲染，但它是我关心的包装器（参见更新后的问题和示例）。

【解决方案2】：

也许这就是你要找的东西：

import ReactDOMServer from 'react-dom/server';

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

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

【讨论】：

这可行，谢谢。我想知道在客户端加载react-dom/server 是否有影响。
从反应文档中，ReactDOMServer.renderToStaticMarkup 可以在服务器和浏览器中使用。 reactjs.org/docs/react-dom-server.html#overview