React.js中如何通过遍历children为子元素添加props/属性？

可以，但要遵循React的核心规则——React元素是不可变对象，不能直接修改子元素的props，必须通过React.cloneElement()创建新元素来添加或覆盖属性。同时要注意children的类型多样性，避免遍历出错。

关键注意点 #

• 处理children的多样类型：children可能是单个元素、数组，甚至是文本、数字这类非React元素类型。直接用原生forEach遍历可能报错，推荐用React.Children.map()，它会自动处理单个元素的情况，还能过滤无效元素。
• 不可直接修改子元素：React元素的props是只读的，直接修改child.props会触发错误，必须通过克隆生成新元素。

修正后的示例代码 #

import React from 'react';

function Comp({ children }) {
  const modifiedChildren = React.Children.map(children, (child) => {
    // 仅处理有效的React元素，跳过文本、数字等类型
    if (React.isValidElement(child)) {
      // 克隆元素并合并新props，同名新props会覆盖原有props
      return React.cloneElement(child, {
        customProp: 'added-value',
        // 保留原有事件逻辑的同时添加新逻辑
        onClick: (e) => {
          child.props.onClick?.(e);
          console.log('新增的点击处理');
        }
      });
    }
    // 非元素类型直接返回原内容
    return child;
  });

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

额外说明 #

• React.Children.map会自动处理children非数组的场景（比如仅传入一个子元素时），避免了forEach在单个元素上调用报错的问题。
• 克隆元素时，新传入的props会和原有props合并，若存在同名属性，新属性会覆盖旧属性，但可以通过调用原有props的方法（如child.props.onClick?.(e)）来保留原有业务逻辑。

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