React中如何为函数组件类型的子元素强制注入props属性

结论 #

首先明确：无法在Tooltip组件层面，直接强制将事件等props注入到自定义子组件返回的内部根元素上。这是React的组件封装规则决定的：父组件只能向直接子组件传递props，无权直接修改子组件内部渲染的节点属性。

原因说明 #

你当前的写法中，React.cloneElement给<MyButton>注入的onMouseEnter，只是作为props传入了MyButton组件实例。如果MyButton没有主动将接收到的props透传给自身返回的最外层DOM节点，事件自然不会绑定到实际渲染的元素上，和你推测的原因完全一致。

可行解决方案 #

方案1：约定自定义组件透传props（推荐，符合React最佳实践） #

要求所有需要放在Tooltip内的自定义组件，统一将未知props透传给根节点，示例如下：

const MyButton = (props) => {
  return (
    <button {...props}> {/* 透传所有未知props */}
      {props.children}
    </button>
  )
}

这个方案实现成本最低，也符合React单向数据流的设计原则，是绝大多数组件库的通用约定。

方案2：Tooltip外层包裹原生DOM节点（无侵入，兼容性最好） #

如果你无法要求使用方修改自定义组件，可以调整Tooltip的实现逻辑，不用把事件注入到子元素，而是在外层套一个原生的inline容器，把事件绑定在这个容器上：

class Tooltip extends Component {
    render() {
        return (
            {/* 用inline-block避免破坏原有布局 */}
            <span 
              style={{display: 'inline-block'}}
              onMouseEnter={() => { console.log('onMouseEnter'); }}
            >
                {this.props.children}
                {/* 原有Tooltip浮层逻辑 */}
            </span>
        )
    }
}

这个方案完全不需要子组件做任何改造，不管子元素是原生DOM还是自定义组件都能正常触发事件。

方案3：ref配合DOM操作（不推荐） #

如果非要直接操作子组件内部的根元素，可以通过ref拿到DOM节点后手动绑定事件，但需要自定义组件配合透传ref，实现成本高，还容易出现内存泄漏、事件重复绑定等问题，除非特殊场景否则不建议使用。

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