如何为Render Props添加点击事件以触发子组件的handleClick方法？

要实现点击Text that I want时触发Child组件的handleClick函数，核心是给渲染的内容添加点击事件绑定，同时确保handleClick里的this指向正确（因为是Class组件）。这里有两种简单可行的方式：

方法一：用容器元素包裹并绑定事件 #

这是最直接的方案——因为文本节点本身无法绑定点击事件，我们需要把children放在一个可交互的元素（比如div或span）里，然后给这个元素添加onClick事件：

class Child extends React.Component{
  // 用箭头函数自动绑定this，省去手动bind的步骤
  handleClick = () => {
    console.log('Hi')
  }

  render() {
    return(
      {/* 用div包裹children，把点击事件绑定到handleClick */}
      <div onClick={this.handleClick}>
        {this.props.children}
      </div>
    )
  }
}

如果你习惯用普通函数写法，也可以在构造函数里手动绑定this：

class Child extends React.Component{
  constructor(props) {
    super(props);
    // 手动把this绑定到handleClick，确保函数内的this指向组件实例
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Hi')
  }

  render() {
    return(
      <div onClick={this.handleClick}>
        {this.props.children}
      </div>
    )
  }
}

方法二：用React.cloneElement给子元素添加事件（仅适用于children是单个React元素的场景） #

如果你的children不是纯文本，而是一个已存在的React元素（比如<p>Text that I want</p>），可以用React.cloneElement给它添加onClick属性：

class Child extends React.Component{
  handleClick = () => {
    console.log('Hi')
  }

  render() {
    // 注意：只有当children是单个React元素时，这种方法才生效
    return React.cloneElement(this.props.children, {
      onClick: this.handleClick
    });
  }
}

不过你当前的children是纯文本，这种方法不适用（文本节点无法被克隆添加属性），所以第一种方法更贴合你的需求。

修改完成后，点击Text that I want就会触发handleClick函数，控制台会打印出Hi啦！

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