如何为作为Prop传入的React元素添加额外属性？

嘿，这事儿其实挺常见的，React专门给我们准备了一个API来解决这个问题——React.cloneElement。毕竟React元素是不可变的，你没法直接修改传入的元素Prop的属性，只能通过克隆它并附加新属性的方式来实现。

解决方案代码示例 #

先看修改后的子组件代码，完全适配你原来的父组件写法：

class MenuItem extends React.Component {
  render() {
    // 先判断传入的icon是否存在，避免空值报错
    const enhancedIcon = this.props.icon ? React.cloneElement(
      this.props.icon,
      // 这里写你要添加的额外属性，也可以覆盖原有属性
      {
        className: 'menu-item-icon',
        onClick: () => console.log('点击了图标！'),
        size: 24
      }
    ) : null;

    return (
      <div className="menu-item">
        {enhancedIcon}
        {/* 这里可以添加MenuItem的其他内容，比如文字标签 */}
      </div>
    );
  }
}

原理说明 #

React.cloneElement的核心作用就是创建已有元素的副本，并在副本上添加/覆盖Props：

• 第一个参数：你要克隆的目标React元素（也就是父组件传过来的this.props.icon）
• 第二个参数：要添加或修改的属性对象
• 可选后续参数：如果需要替换原有子元素，可以在这里传入新的子元素

另一种可选思路 #

如果你能调整父组件的传参方式，也可以不传已渲染好的元素，而是传组件本身，然后在子组件里自行渲染并附加属性：

修改后的父组件：

class Menu extends React.Component {
  render() {
    return(
      <div className="Menu">
        <MenuItem icon={MdInbox} />
        <MenuItem icon={MdDrafts} />
        <MenuItem icon={MdTrash} />
      </div>
    );
  }
}

对应的子组件：

class MenuItem extends React.Component {
  render() {
    const IconComponent = this.props.icon;
    return (
      <div className="menu-item">
        {IconComponent && <IconComponent className="menu-item-icon" size={24} />}
      </div>
    );
  }
}

这种方式适合不需要父组件给Icon传复杂初始Props的场景，代码会更简洁直观。

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