ReactJS中如何无需硬编码即可为所有子元素批量添加父元素事件？

完全可以实现，不需要给每个子元素逐个硬编码事件属性，根据场景选以下两种方案即可：

方案1：利用原生事件冒泡（优先推荐，零额外代码） #

你给出的示例代码默认就已经满足需求：DOM事件自带冒泡机制，当你点击、双击子级span时，事件会沿着DOM树向上传导到父级div，父元素上绑定的onClick、onDoubleClick会自动触发，不需要给子元素单独绑定任何事件。

如果需要区分事件触发源是父元素本身还是某个子元素，直接在事件处理函数里通过event.target判断即可，示例：

const handleSelect = (e) => {
  // 触发源是className为child的子元素
  if (e.target.classList.contains('child')) {
    console.log('选中子元素span')
  }
  // 触发源是父元素本身
  if (e.target.classList.contains('myClass')) {
    console.log('点击了父容器')
  }
}

这个方案性能最优、代码量最少，绝大多数常规场景用这个方案就够了。

方案2：批量克隆子元素注入事件（事件需直接绑定在子元素时使用） #

如果你的业务场景不适合用冒泡（比如需要单独阻止子元素事件冒泡、要求事件直接注册在子元素DOM节点上），可以借助React内置的React.Children和React.cloneElementAPI，遍历所有子元素批量注入事件属性，不需要逐个给子元素写事件绑定代码。
示例代码：

import React from 'react';

const EventBatchWrapper = ({ children, ...restProps }) => {
  // 遍历所有直接子元素，批量注入事件属性
  const processedChildren = React.Children.map(children, child => {
    // 跳过文本、注释等非React元素节点
    if (!React.isValidElement(child)) return child;
    // 克隆子元素，合并事件属性，保留子元素原有props避免覆盖
    return React.cloneElement(child, {
      ...restProps,
      ...child.props,
    });
  });

  return (
    <div className='myClass' {...restProps}>
      {processedChildren}
    </div>
  );
};

// 使用时只需要给父级 wrapper 绑事件，内部所有子元素会自动继承事件
<EventBatchWrapper
  onClick={handleSelect}
  onDoubleClick={handleOpen}
>
  <span className='child' />
  {/* 后续新增任意直接子元素，都不需要重复写事件绑定 */}
  <span className='child-second' />
  <p className='child-third' />
</EventBatchWrapper>

这个方案的注意点：

• 默认只处理直接子元素，如果需要给所有层级的后代元素都注入事件，在遍历逻辑里加递归处理即可
• 合并props时记得把子元素原有props放在后面，避免覆盖子元素自己定义的属性和事件

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