React：如何使用JavaScript判断组件是否有返回内容

直接调用 Bar() 会导致组件被渲染两次（一次用于判断，一次在Grid中），不仅浪费性能还可能引发副作用，正确的做法是先获取Bar的渲染结果再复用：

• 用变量存储Bar的渲染内容，判断是否有效后再决定Grid的布局
• 避免重复调用组件函数

示例代码：

const barContent = <Bar />;
// 判断组件是否返回有效内容，排除null/undefined/空片段等情况
const hasBarContent = barContent !== null && barContent !== undefined && !(Array.isArray(barContent) && barContent.length === 0);

return (
  <>
    <Grid xs={12} md={hasBarContent ? 8 : 12}>
      <Foo />
    </Grid>
    {hasBarContent && (
      <Grid xs={12} md={4}>
        {barContent}
      </Grid>
    )}
  </>
);

如果Bar是类组件或者需要处理更复杂的渲染情况（比如组件内部有条件渲染），可以使用ReactDOMServer.renderToStaticMarkup来辅助判断：

import ReactDOMServer from 'react-dom/server';

const barContent = <Bar />;
const hasBarContent = ReactDOMServer.renderToStaticMarkup(barContent).trim() !== '';

return (
  <>
    <Grid xs={12} md={hasBarContent ? 8 : 12}>
      <Foo />
    </Grid>
    {hasBarContent && (
      <Grid xs={12} md={4}>
        {barContent}
      </Grid>
    )}
  </>
);

注意：renderToStaticMarkup会忽略React的内部属性（如data-reactroot），适合用于判断组件是否输出了可见内容，但如果组件依赖客户端环境，这种方式可能不准确，此时建议在Bar组件内部暴露一个判断是否有内容的方法或状态。

内容的提问来源于stack exchange，提问作者Rocky