React如何检查children是否渲染，实现SidebarMenu无内容时不渲染自身

问题核心 #

直接判断SidebarMenu接收到的children是否为null是无效的，因为此时拿到的children是<AccessControl />组件的React元素实例，不是最终的渲染结果，所以直接判断!children会失效。

方案1：CSS :empty 伪类实现（最简易，适配所有场景） #

不需要修改JS逻辑，仅通过样式控制空容器隐藏：

1. 给SidebarMenu的容器加类名，修改组件代码：

function SidebarMenu({ children }) {
  return <div className="sidebar-menu">{children}</div>;
}

2. 新增CSS样式：

.sidebar-menu {
  border: 1px solid red;
}
/* 容器没有子元素时自动隐藏 */
.sidebar-menu:empty {
  display: none;
}

优缺点：实现成本极低，完全兼容函数组件/类组件/带Hooks的组件，唯一不足是会生成空的DOM节点，大部分场景可忽略。

方案2：JS逻辑判断（直接不渲染DOM，性能最优） #

通过递归判断children最终渲染结果是否为有效内容，决定是否返回null：

import React from "react";

// 辅助函数：判断React节点是否包含可渲染的有效内容
const hasValidContent = (node) => {
  // 过滤null/undefined/空字符串等falsy值，保留合法的0值
  if (!node && node !== 0) return false;
  // 数组类型递归判断每一项
  if (Array.isArray(node)) return node.some(hasValidContent);
  // 是React元素的情况
  if (React.isValidElement(node)) {
    // 无Hooks的函数组件：执行获取返回值再判断
    if (typeof node.type === "function") {
      try {
        const renderedNode = node.type({
          ...node.props,
          children: node.props.children,
        });
        return hasValidContent(renderedNode);
      } catch (e) {
        // 组件包含Hooks调用时会报错，降级认为是有效内容
        return true;
      }
    }
    // 原生DOM元素/类组件认为是有效内容
    return true;
  }
  // 字符串/数字等基础类型都是有效内容
  return true;
};

function SidebarMenu({ children }) {
  if (!hasValidContent(children)) return null;
  return <div style={{ border: "1px solid red" }}>{children}</div>;
}

优缺点：没有有效内容时完全不生成DOM，性能更好；缺点是对包含Hooks的函数组件无法直接调用判断，需要降级处理。

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