React使用useRef调用子组件方法

手机

又是一年开学季丨无缝接驳直通高校武汉贴心迎新

科锐国际廖萍：数字化人才将成为VUCA时代企业人才战略的核心

家电

React使用useRef调用子组件方法

2023-09-07 21:10:00 来源：博客园

(相关资料图)

前情

公司前端主技术栈是react系，最近在提取组件的时候想到vue可以通过ref获取子组件，再调用子组件的方法，于是想在react中实现同样效果。

实现原理

父组件调用useRef获取ref对象，再通过属性把ref对象传入子组件，子组件通过useImperativeHandle向外暴露方法给父组件调用

useRef – React 中文文档

useImperativeHandle – React 中文文档

关键代码

父组件

import { useRef } from "react";import Child from "./child";export default function Father() {    const childRef = useRef();    const childAction = () => {        //updateChildText 就是子组件暴露给父组件的方法        childRef.current && childRef.current.updateChildText ("父组件调用子组件方法");    }    return (                    {/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef}  */}                                
    )}

子组件

//这个为子组件import {useState, useImperativeHandle, useState} from "react";export default function Child({cRef})  {const [text, setText] = "我是子组件"const updateChildText = (str) => {setText(str);}    //useImperativeHandle(ref, createHandle, [deps])       useImperativeHandle(cRef,() => ({        //test即为子组件暴露给父组件的方法        updateChildText    }))    return (        {text}
    )}

关键词：