React中如何在父元素内克隆子元素并添加新属性？

你需要先克隆外层的<div>元素，同时替换它的子元素——对原div内的每个<span>进行克隆并添加onClick属性。具体实现如下：

核心代码 #

// 定义点击事件处理函数
const handleClick = (e) => {
  console.log('点击的span内容:', e.target.textContent);
};

// 处理目标元素的函数
const modifyElements = (originalElement) => {
  // 克隆外层div，同时处理它的子元素
  return React.cloneElement(originalElement, {}, 
    React.Children.map(originalElement.props.children, (child) => {
      // 仅对span元素添加onClick属性
      if (child.type === 'span') {
        return React.cloneElement(child, { onClick: handleClick });
      }
      // 非span元素直接返回原元素，保持原样
      return child;
    })
  );
};

使用示例 #

如果这个带div的结构是某个组件的子元素，可以这样调用：

const WrapperComponent = ({ children }) => {
  return modifyElements(children);
};

// 实际使用
<WrapperComponent>
  <div className="container">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</WrapperComponent>

补充说明 #

• 外层div的原有属性（比如className、style）会被自动保留，因为React.cloneElement的第二个参数传空对象时不会覆盖原有属性；如果需要给div添加新属性，直接在第二个参数中定义即可。
• 加入child.type === 'span'的判断，是为了避免误修改div内可能存在的其他类型子元素，确保只有目标span被处理。

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