react中子组件调用父组件的函数

在 React 中，子组件可以通过 props 传递函数到父组件中，从而实现调用父组件的函数。

具体来说，可以在父组件中定义一个函数，然后将该函数作为 props 传递给子组件。在子组件中，可以使用 props 调用父组件中的函数，从而实现父子组件之间的通信。

例如，在父组件中定义一个函数 handleClick，用于在点击按钮时修改 count 值：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <ChildComponent onClick={this.handleClick} />
        <div>Count: {this.state.count}</div>
      </div>
    );
  }
}

在子组件中，通过 props 获取父组件传递的函数，并在需要的时候调用该函数：

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onClick}>Click me</button>
      </div>
    );
  }
}

此时，点击子组件中的按钮会调用父组件中的 handleClick 函数，从而修改 count 值并更新父组件中显示的值。