如何将属性传递给递归子组件并保留所有属性

import React from 'react';

const RecursiveComponent = (props) => {
  const { children, ...restProps } = props; // 使用spread操作符将除了children之外的属性解构出来

  return (
    <div>
      {/* 在递归子组件中将属性传递给下一级子组件 */}
      {React.Children.map(children, (child) => {
        return React.cloneElement(child, { ...restProps });
      })}
    </div>
  );
};

export default RecursiveComponent;

import React from 'react';
import RecursiveComponent from './RecursiveComponent';

const ParentComponent = () => {
  const data = 'some data';

  return (
    <RecursiveComponent prop1="value1" prop2="value2">
      <ChildComponent />
    </RecursiveComponent>
  );
};

const ChildComponent = (props) => {
  const { prop1, prop2 } = props; // 在子组件中获取传递的属性

  return (
    <div>
      <p>prop1: {prop1}</p>
      <p>prop2: {prop2}</p>
    </div>
  );
};

export default ParentComponent;