无需ContextApi，如何用React.cloneElement向深层嵌套组件传age值？

当然可以不用Context API实现。当前代码的问题在于，Parent仅给直接子元素Child传递了age，但中间的Child、NestedChild并未将这个age继续传递给自身的子组件，且Parent的克隆逻辑只处理了第一层子节点。

以下是两种可行的解决思路：

方案一：递归遍历所有子节点，统一传递props #

修改Parent组件，新增递归处理函数，遍历所有层级的子组件，把age注入到每个节点中：

import React from "react";
import "./styles.css";

const OneMoreNestedChild = ({ age }) => {
  return (
    <>
      <p>One more nested child</p> Age: {age}
    </>
  );
};

const NestedChild = ({ children }) => {
  return (
    <>
      <p>Nested children</p> {children}
    </>
  );
};

const Child = ({ children }) => {
  return (
    <>
      <p>Child</p> {children}
    </>
  );
};

// 递归处理所有嵌套子组件，传递目标props
const recursivelyCloneChildren = (children, propsToPass) => {
  return React.Children.map(children, (child) => {
    const clonedChild = React.cloneElement(child, propsToPass);
    // 如果当前子组件还有子节点，继续递归处理
    if (clonedChild.props.children) {
      return React.cloneElement(
        clonedChild,
        {},
        recursivelyCloneChildren(clonedChild.props.children, propsToPass)
      );
    }
    return clonedChild;
  });
};

const Parent = ({ children }) => {
  const newChildren = recursivelyCloneChildren(children, { age: 1 });
  return <div>{newChildren}</div>;
};

export default function App() {
  return (
    <div className="App">
      <Parent>
        <Child>
          <NestedChild>
            <OneMoreNestedChild />
          </NestedChild>
        </Child>
      </Parent>
    </div>
  );
};

该方案通过recursivelyCloneChildren函数逐层遍历组件树，确保age能传递到最底层的OneMoreNestedChild，适合嵌套层级较深的场景。

方案二：中间组件显式传递props #

如果嵌套层级不多，可让中间组件接收age并手动传递给子组件：

import React from "react";
import "./styles.css";

const OneMoreNestedChild = ({ age }) => {
  return (
    <>
      <p>One more nested child</p> Age: {age}
    </>
  );
};

// 修改NestedChild，接收age并传递给子组件
const NestedChild = ({ age, children }) => {
  const passedChildren = React.Children.map(children, child => 
    React.cloneElement(child, { age })
  );
  return (
    <>
      <p>Nested children</p> {passedChildren}
    </>
  );
};

// 修改Child，接收age并传递给子组件
const Child = ({ age, children }) => {
  const passedChildren = React.Children.map(children, child => 
    React.cloneElement(child, { age })
  );
  return (
    <>
      <p>Child</p> {passedChildren}
    </>
  );
};

const Parent = ({ children }) => {
  const newChildren = React.Children.map(children, (child) =>
    React.cloneElement(child, { age: 1 })
  );

  return <div>{newChildren}</div>;
};

export default function App() {
  return (
    <div className="App">
      <Parent>
        <Child>
          <NestedChild>
            <OneMoreNestedChild />
          </NestedChild>
        </Child>
      </Parent>
    </div>
  );
};

这种方式需要每个中间组件显式处理props传递，逻辑直观但仅适合层级较少的场景。

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