如何在React.js的React.createElement()中传递回调函数实现子父组件通信

实现方案 #

你可以直接把回调函数作为属性写入React.createElement的第二个参数（子组件props对象），具体实现如下：

第一步：父组件新增子组件状态处理方法，添加到子组件props #

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '',
      changes: '' // 存储子组件传递过来的状态
    }
    
    this.handler = this.handler.bind(this);
    // 新增绑定子组件状态变更的回调
    this.handleChildStateChange = this.handleChildStateChange.bind(this);
  }
 handler(id) {
    this.setState({
      data: id
    });
  }
  // 新增接收子组件状态的方法
  handleChildStateChange(childState) {
    this.setState({
      changes: childState
    })
  }
  render() {
    return (
      <React.Fragment>
        <Row>
          <Col className="col-3">
            {/* 将父组件最新state传递给SideNav实现同步 */}
            <SideNav data={this.state} props={this.props} onChange={this.handler} />
          </Col>
          <Col>
            {React.createElement(
              ChildComponent, {
                data: this.state.data,
                // 新增回调属性，子组件内部调用即可传值到父组件
                onStateChange: this.handleChildStateChange
              }
            )}
          </Col>
        </Row>
      </React.Fragment>
    )
  }
}

第二步：子组件内部调用回调方法同步状态 #

在子组件需要同步状态的逻辑处，调用props上的onStateChange方法传入最新状态即可，示例：

// ChildComponent 内部示例代码
class ChildComponent extends Component {
  // 子组件某个状态变更的处理逻辑
  handleSomeUpdate = (newVal) => {
    this.setState({
      someState: newVal
    }, () => {
      // 调用父组件传递的回调，把需要同步的状态传出去
      this.props.onStateChange(this.state.someState)
    })
  }
}

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