react 中父组件通过使用 refs 来调用子组件实例的方法

class 组件

// App.js
import React, { Component, createRef } from "react";
import ChildClass from "./ChildClass ";

class App extends Component {
  childClassRef = createRef();
  handleClick = () => {
    this.childClassRef.current.changeStatus();
  };
  render() {
    return (
      

        
        父组件调用子组件点击事件
      
    );
  }
}

// ChildClass .js
import React, { Component } from "react";

class ChildClass extends Component {
  state = {
    status: false,
  };

  changeStatus = () => {
    this.setState({
      status: !this.state.status,
    });
  };
  render() {
    return 
;
  }
}

export default ChildClass;

函数组件

函数组件中需要搭配 useImperativeHandle + forwardRef 使用

// App.js
import { useRef } from 'react';
import ChildFun from './Child'
const App = () => {
  const childRef = useRef(null);

  const handleClick = () => {
    console.log("childRef.current", childRef.current);
    childRef.current.changeStatus();
  };
  return (
    

      
      父组件调用子组件的方法
    
  );
};
export default App;

// ChildFun.js
import React, { useState, useImperativeHandle, forwardRef } from "react";
const Child = (props, ref) => {
  const [status, setStatus] = useState(false);
  useImperativeHandle(ref, () => {
      return {
        changeStatus: () => {
          setStatus(!status);
        },
      };
    },
    []
  );
  return 
;
};

const ChildFun = forwardRef(Child);
export default ChildFun;

参考文章：

react 官方文档

createRef

useRef

useImperativeHandle