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

1、自定义事件

子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件

Son

import React, { Component } from 'react'

export default class Son extends Component {

  state = {
    count: 0
  }
  
  // 在组件加载完成之后，自动执行一次，把this传递给父组件
  componentDidMount() {
   this.props.onChildEvent(this) 
  }

  // 子组件方法，父组件调用
  addCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    console.log(111);
    return (
      <div>Son=={this.state.count}</div>
    )
  }

App

import React, { Component } from 'react'
import Son from './components/Son'

export default class App extends Component {

  parameter = (ref) => {
    // 将子组件的实例存到 this.childRef 中, 这样整个父组件就能拿到子组件的实例
    this.childRef = ref
  }

  countHandle = () => {
    // 调用子组件的方法
    console.log(this.childRef.addCount())
  }

  render() {
    return (
      <div>
        <Son onChildEvent={this.parameter} />
        <button onClick={() => this.countHandle()}>点击</button>
      </div>
    )
  }
}

2、React.createRef

Son

import React, { Component } from 'react'

export default class Son extends Component {

  // 初始化状态
  state = {
    count: 0
  }
  
  // 父组件调用子组件方法
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>Son=={this.state.count}</div>
    )
  }
}

App

import React, { Component } from 'react'
import Son from './components/Son2'

export default class App extends Component {

  // 创建ref,并赋值给ChildRef
  ChildRef = React.createRef()

  // 点击按钮触发
  countHandle = () => {
    this.ChildRef.current.setCount()
  }

  render() {
    return (
      <div>
        <Son ref={this.ChildRef}/>
        <button onClick={this.countHandle}>点击</button>
      </div>
    )
  }
}

3、使用回调Refs

它能助你更精细地控制何时 refs 被设置和解除

不同于传递 createRef() 创建的 ref 属性，需要传递一个函数

Son

import React, { Component } from 'react'

export default class Son extends Component {

  // 初始化状态
  state = {
    count: 0
  }
  
  // 父组件调用子组件方法
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>Son=={this.state.count}</div>
    )
  }
}

App

import React, { Component } from 'react'
import Son from './components/Son2'

export default class App extends Component {

  // 创建ref,并赋值给ChildRef
  ChildRef = null

  // 设置ref,并赋值给ChildRef
  setChildRef = (ref) => {
    this.ChildRef = ref
  }

  // 点击按钮触发
  countHandle = () => {
    this.ChildRef.setCount()
  }

  render() {
    return (
      <div>
        <Son ref={this.setChildRef}/>
        <button onClick={this.countHandle}>点击</button>
      </div>
    )
  }
}