react父组件调用子组件

在React中，父组件调用子组件的方式有多种方法。一种常见的方法是通过使用props将子组件的方法传递给父组件。首先，在子组件中，定义一个方法，并将该方法作为props传递给父组件。父组件可以通过调用这个props方法来调用子组件的方法。另外，父组件还可以使用refs来引用子组件的实例，并直接调用子组件的方法。

具体实现方法如下：
1. 在子组件中，定义一个方法，比如`handleChildMethod`，并将该方法作为props传递给父组件，通过`this.props.onRef(this)`。
2. 在父组件中，定义一个方法，比如`handleChildMethod`，用于调用子组件的方法。
3. 在父组件的render方法中，将子组件渲染出来，并通过`onRef`属性将子组件的实例赋值给父组件的一个变量，比如`this.child`。
4. 当需要调用子组件的方法时，直接通过`this.child`引用子组件的实例，并调用子组件的方法。

以下是一个示例代码：

// 子组件
export default class Child extends React.Component {
  state = {
    visible: false
  }

  componentDidMount() {
    this.props.onRef(this)
  }

  visibleToggle = () => {
    this.setState({ visible: !this.state.visible })
  }

  render() {
    return (
      <Modal
        title="我是弹窗"
        visible={this.state.visible}
        onCancel={this.visibleToggle}
      >
        {/* 弹窗内容 */}
      </Modal>
    )
  }
}

// 父组件
export default class Parent extends React.Component {
  handleChildMethod = () => {
    this.child.visibleToggle()
  }

  render() {
    return (
      <div>
        <Child onRef={ref => this.child = ref} />
        <button onClick={this.handleChildMethod}>调用子组件方法</button>
      </div>
    )
  }
}

在上面的代码中，父组件通过`onRef`属性将子组件的实例赋值给了`this.child`，然后可以通过`this.child`来调用子组件的`visibleToggle`方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [React 父组件调用子组件方法](https://blog.csdn.net/qq_27195907/article/details/96861163)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]