class組件

父組件

import React, { Component } from "react";
import Child from './child'
export default class Parent extends Component {

componentDidMount(){
    //被調(diào)用的子組件
    this.child.test('參數(shù)')
}

onRef(ref){this.child = ref}

render() {
    return (
      <div>
        <Child onRef={this.onRef} />
      </div>
    );
  }
}

子組件

import React, { Component } from "react";

export default class Child extends Component {

componentDidMount(){
    this.props.onRef(this)
}
//子組件被調(diào)用方法
test(val){
    alert('我是測試方法'+val)
}

render() {
    return (
      <div>
            我是子組件
      </div>
    );
  }
}

react hook 父組件調(diào)用子組件方法

父組件

import {useRef} from 'react'
import ChildComp from './ChildComp'
export default function App() {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子組件暴露給父組件的方法
        childRef.current.changeVal(99);
    }
    return (
        <>
            {/* 此處注意需要將childRef通過props屬性從父組件中傳給自己 cRef={childRef} */}
            <ChildComp  cRef={childRef} />
            <button onClick={updateChildState}>觸發(fā)子組件方法</button>
        </>
    )
}

子組件

import { useState, useImperativeHandle } from 'react';
// props子組件中需要接受ref
export default function ChildComp({ cRef }) {
    const [val, setVal] = useState();
    function rules(a) {
        console.log(a);
    }
    // 此處注意useImperativeHandle方法的的第一個參數(shù)是目標(biāo)元素的ref引用
    useImperativeHandle(cRef, () => ({
        // changeVal 就是暴露給父組件的方法
        changeVal: (newVal) => {
            rules(newVal);
        }
    }));
    return (
        <div>{val}</div>
    )
}