Great question! Let's unpack this confusion between the React docs' warning and the recursive React.Children.map solutions you've seen.

首先，理解官方文档的“Pitfall”到底是什么意思 #

在操作子元素时，无法获取<MoreRows />这类内部组件的渲染输出。

这句话的核心是组件封装原则：自定义组件（比如MoreRows）的内部渲染内容是它自己的私有实现，外部组件（比如RowList）没有权限直接访问。当你在RowList里拿到children中的<MoreRows />时，你拿到的只是这个组件的“引用”，而不是它渲染出来的<p>元素——因为MoreRows并没有把这些<p>作为props.children暴露给外部。

举个例子：你写了<MoreRows />，没有给它传递任何子元素，所以MoreRows.props.children是undefined。它内部的两个<p>是组件自己生成的，不属于外部能直接获取的children范畴。

那Stack Overflow的递归方案为什么可行？ #

那些递归React.Children.map的方案，针对的是已经通过props.children暴露出来的嵌套子元素，而不是突破组件封装去拿内部渲染内容。

比如，如果你的结构是这样的：

<RowList>
  <div>
    <p>First nested item</p>
    <p>Second nested item</p>
  </div>
  <p>Top-level item</p>
</RowList>

这里的<div>是原生DOM组件，它的props.children就是两个<p>，递归React.Children.map就能遍历到这些嵌套的<p>，因为它们是通过children传递的，没有被封装在自定义组件里。

你的代码为什么没成功？ #

你尝试对<MoreRows />调用React.Children.map(child, ...)或者child.props.children，但：

1. <MoreRows />是自定义组件，你在使用它时没有传递任何子元素，所以child.props.children是undefined。
2. MoreRows内部的<p>是它自己的渲染结果，不是props.children，所以外部根本拿不到这些元素。

简单说：你试图访问的内容，并没有被MoreRows暴露给外部，所以递归也无能为力。

如何让你的示例达到预期效果？ #

要让RowList能处理MoreRows内部的元素，你需要让MoreRows把这些元素暴露出来，常见的方式有两种：

方案1：让MoreRows接收并传递children（推荐，符合组件设计） #

修改MoreRows，让它作为一个“容器”组件，接收外部传递的children，而不是自己硬编码：

function MoreRows({ children }) {
  // 这里可以保留组件的其他逻辑，只是把children传递出去
  return <>{children}</>;
}

// 然后在App里这样用：
function App() {
  return (
    <RowList>
      <p>This is the first item.</p>
      <MoreRows>
        <p>This is the second item.</p>
        <p>This is the third item.</p>
      </MoreRows>
      <p>This is the fourth item.</p>
    </RowList>
  );
}

然后写一个递归处理children的RowList：

function RowList({ children }) {
  const renderRow = (child) => {
    // 如果是自定义组件，先检查它是否有children需要递归处理
    if (typeof child.type === 'function' && child.props.children) {
      return React.Children.map(child.props.children, nestedChild => renderRow(nestedChild));
    }
    // 原生元素或没有嵌套children的组件，直接包裹Row
    return <div className="Row">{child}</div>;
  };

  return (
    <div className="RowList">
      {React.Children.map(children, renderRow)}
    </div>
  );
}

这样RowList就能递归处理所有通过props.children传递的嵌套元素，包括MoreRows里的<p>。

方案2：打破封装（不推荐，违反组件设计原则） #

如果MoreRows不能修改，你可以让它把内部元素通过某种方式暴露（比如返回一个带有特定属性的元素），但这会破坏组件的封装性，不建议在生产环境使用：

// 修改MoreRows，给返回的元素加一个自定义属性
function MoreRows() {
  return (
    <div data-expose-children>
      <p>This is the second item.</p>
      <p>This is the third item.</p>
    </div>
  );
}

// 在RowList里判断并提取
function RowList({ children }) {
  const renderRow = (child) => {
    // 如果是带有data-expose-children的元素，递归处理它的children
    if (child.type === 'div' && child.props['data-expose-children']) {
      return React.Children.map(child.props.children, nestedChild => renderRow(nestedChild));
    }
    return <div className="Row">{child}</div>;
  };

  return (
    <div className="RowList">
      {React.Children.map(children, renderRow)}
    </div>
  );
}

总结 #

• React官方的警告是在说：你不能突破组件封装，直接获取自定义组件内部的私有渲染内容——这是组件设计的基本原则。
• Stack Overflow的递归方案是在处理已经通过props.children主动暴露出来的嵌套子元素——这并没有违反封装原则，因为这些子元素是组件愿意让外部处理的。
• 你的代码失败，是因为你试图访问MoreRows没有暴露的内部内容，而不是递归方案本身无效。

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