使用this.props.children时如何将父组件方法传递给子组件？

我来帮你搞定这个问题～当你直接通过this.props.children渲染子组件时，确实没法像直接写<Child />那样直接传props，这时候我们可以用React.cloneElement来克隆子元素，并给它添加额外的props，把父组件的方法传递过去。

具体步骤和修正后的代码： #

首先要修改Parent组件的render方法，用React.cloneElement处理this.props.children，把foo方法作为props传递给Child，同时要绑定this，确保foo方法里的上下文是Parent实例；然后Child组件接收这个props，在onClick事件中调用它（注意React事件是驼峰式的onClick，要传递函数引用而非字符串）。

完整的修正代码如下：

class Parent extends React.Component {
  foo() {
    console.log('i was called');
  }

  render() {
    // 克隆子元素并传递callFoo方法
    return React.cloneElement(this.props.children, {
      callFoo: this.foo.bind(this)
    });
  }
}

class Child extends React.Component {
  render() {
    // 使用props中的callFoo作为点击事件处理函数
    return <div onClick={this.props.callFoo}>Child</div>;
  }
}

// 注意闭合Child标签
React.render(<Parent><Child /></Parent>, document.getElementById('View'));

关键说明： #

• React.cloneElement：这个方法可以复制已有的React元素，同时添加或覆盖它的props，非常适合给this.props.children传递额外属性的场景。
• this.foo.bind(this)：如果不绑定this，foo方法被调用时内部的this会指向undefined（严格模式下），必须绑定到Parent实例才能保证方法正常执行。
• Child组件的onClick：React事件处理需要传递函数引用，不能像原生HTML那样写字符串，所以要用{this.props.callFoo}而非"call foo here"。

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