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 (
      <div>
        <ChildClass ref={this.childClassRef} />
        <button onClick={this.handleClick}>父组件调用子组件点击事件</button>
      </div>
    );
  }
}

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

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

  changeStatus = () => {
    this.setState({
      status: !this.state.status,
    });
  };
  render() {
    return <div style={{ width: 100, height: 100, background: this.state.status ? "#f00" : "#000" }}></div>;
  }
}

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 (
    <div>
      <ChildFun ref={childRef} />
      <button onClick={handleClick}>父组件调用子组件的方法</button>
    </div>
  );
};
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 <div style={{ width: 100, height: 100, background: status ? "#f00" : "#000" }}></div>;
};

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

参考文章：

react 官方文档

createRef

useRef

useImperativeHandle