假设我正在制作一个包装器组件,该组件仅在传入某些子节点时才呈现自身:
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/> 👎
是否有规范的方法来检查所有这些条件?
最佳答案
也许这就是您正在寻找的:
import ReactDOMServer from 'react-dom/server';
const Wrapper = ({children}) => {
const markup = ReactDOMServer.renderToStaticMarkup(children);
if (!markup.trim()) return null;
return <div>{children}</div>
}
关于reactjs - 如何检查 React 元素是否会渲染任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58165629/