子组件调用 父组件的方法
在React中，子组件调用父组件的方法是一个常见的需求，例如在点击子组件的按钮后更新父组件的状态或者传递子组件的数据给父组件。这可以通过在子组件中使用props传递函数给父组件来实现。
首先，在父组件中定义一个方法，可以通过这个方法更新父组件的状态或者获取子组件的数据。这个方法需要通过props的形式传递给子组件：
```jsx
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
    this.handleChildClick = this.handleChildClick.bind(this);
  }
  handleChildClick(childData) {
    this.setState({ data: childData });
  }
  render() {
    return (
react组件之间通信
      <div>
        <ChildComponent handleClick={this.handleChildClick} />
        <DataComponent data={this.state.data} />
      </div>
    );
  }
}
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childData: []
    };
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }
  handleButtonClick() {
    let data = ["child data"];
    this.props.handleClick(data);
    this.setState({ childData: data });
  }
  render() {
    return <button onClick={this.handleButtonClick}>Click Me</button>;
  }
}
function DataComponent(props) {
  return <div>{props.data}</div>;
}
der(<ParentComponent />, ElementById("root"));
```
在上面的例子中，父组件ParentComponent定义了一个handleChildClick方法，并将这个方法以handleClick的形式传递给了子组件ChildComponent。在子组件ChildComponent中，点击按钮会触发handleButtonClick方法，该方法会调用handleClick方法更新父组件的状态和子组件的状态。
最后，将父组件的DataComponent作为子组件的数据展示组件，可以看到子组件的数据已经传递给了父组件并成功更新了父组件的状态。
总之，子组件调用父组件的方法在React中是可行的，而且通过props传递函数的形式可以实现。这种方法非常灵活，可以满足各种组件之间的通信需求。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。