向React组件中的this.props.children添加自定义道具

import React from 'react';

class WithExtraProps extends React.Component {
  render() {
    const extraProps = { customProp: 'Hello World' };

    return React.Children.map(this.props.children, child => {
      // 确保child是一个有效的React元素
      if (React.isValidElement(child)) {
        // 克隆子元素并添加额外的道具
        return React.cloneElement(child, { ...extraProps });
      }
      // 如果不是React元素，直接返回原样
      return child;
    });
  }
}

// 使用WithExtraProps组件
function App() {
  return (
    <WithExtraProps>
      <ChildComponent />
      <AnotherChildComponent />
    </WithExtraProps>
  );
}

function ChildComponent(props) {
  return <div>{props.customProp}</div>;
}

function AnotherChildComponent(props) {
  return <div>Another component with {props.customProp}</div>;
}

export default App;

function ChildComponent(props) {
  // 确保这里使用了props.customProp
  return <div>{props.customProp}</div>;
}