react调用子组件方法（forwardRef+useImperativeHandle）

是gary啊

已于 2023-12-05 16:22:41 修改

阅读量425

点赞数 8

分类专栏：前端框架react 文章标签： react.js 前端前端框架

于 2023-12-05 16:07:30 首次发布

本文链接：https://blog.csdn.net/m0_46697445/article/details/134809688

版权

前端框架react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何在React中使用`forwardRef`和`useImperativeHandle`让父组件能够访问并操作子组件的DOM元素，通过`ref`暴露子组件的方法。案例演示了父组件如何调用子组件方法改变样式。

摘要由CSDN通过智能技术生成

forwardRef : 允许许组件使用 ref 将 DOM 节点暴露给父组件
- 参数：组件的渲染函数；
- 返回值：返回一个可以在 JSX 中渲染的 React 组件。与作为纯函数定义的 React 组件不同，forwardRef 返回的组件还能够接收 ref 属性
useImperativeHandle
- 像父组件暴露一个自定义的ref句柄
- 暴露自己的方法，可以有自己的以来项，就像 useEffect 一样

小案例：

// 父组件
import React from 'react'
import Child from './Child'
const Test = () => {

    const childRef: any = React.createRef()

    return (
        <div>
            <button onClick={() => {
                childRef.current?.changeBgc({ backgroundColor: 'red' })
            }}>点击换颜色</button>
            <Child ref={childRef} />
        </div>
    )
}
export default Test

// 子组件
import React, { useState, useImperativeHandle, forwardRef } from 'react'
const Child = (props: any, ref: any) => {
    const [styleObj, setstyleObj] = useState({ width: '300px', height: '300px', backgroundColor: 'pink' })
    useImperativeHandle(ref, () => ({
        changeBgc: (_: any) => {
            _ && setstyleObj({ ...styleObj, ..._ })
        },
    }));
    return (
        <div style={styleObj}></div>
    )
}
export default forwardRef(Child)

以上案例是通过父组件调用子组件的方法，改变子组件内部元素的背景颜色

代码执行效果