React中如何给父组件所有子组件批量传递相同prop？

React 原生提供了对应的API可以实现这个需求，无需引入第三方库，自己封装的成本极低，核心依赖React.Children.map和React.cloneElement两个API即可。

实现示例 #

函数组件版本 #

import { Children, cloneElement } from 'react';

const Parent = ({ passPropsToChildren, children }) => {
  // 遍历所有子节点，仅对合法React元素追加公共props
  return Children.map(children, child => {
    if (typeof child !== 'object' || !child?.type) return child;
    return cloneElement(child, { ...passPropsToChildren });
  });
};

类组件版本 #

import React from 'react';

class Parent extends React.Component {
  render() {
    const { passPropsToChildren, children } = this.props;
    return React.Children.map(children, child => {
      if (typeof child !== 'object' || !child?.type) return child;
      return React.cloneElement(child, { ...passPropsToChildren });
    });
  }
}

封装完成后就可以直接使用你期望的简化写法，和手动给每个子组件加prop的效果完全一致。

注意事项 #

• 该方案仅会给Parent的直接子组件传递props，不会作用于孙组件及更深层级的节点，如果需要跨层级传值还是推荐使用Context API。
• 代码中增加了非React元素的判断逻辑，可以避免子节点中存在文本、空值、表达式节点时克隆报错，兼容性更好。
• 如有部分子组件不需要传递公共prop，可以自行增加过滤逻辑（比如根据子组件的displayName判断），灵活度较高。

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