react - forwardRef

最新推荐文章于 2024-09-11 15:46:14 发布

羽翼8850

最新推荐文章于 2024-09-11 15:46:14 发布

阅读量306

点赞数

分类专栏：互联网前端文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/YY1580569/article/details/120940591

版权

互联网同时被 2 个专栏收录

4 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文详细介绍了在React中如何使用forwardRef将ref属性传递给函数组件，包括在父组件创建ref，通过props将ref传入子组件，以及在子组件中接收和应用ref的过程。通过这种方式，函数组件也能拥有对DOM元素的直接访问，实现类似类组件的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react - forwardRef

类组件（复杂组件，状态组件）拥有生命周期，state，需要继承React.component
函数组件（函数组件，简单组件，无状态组件）
函数组件可以通过hooks让函数组件拥有生命周期和状态，并不需要继承React.component

让函数组件拥有ref

1.在父级创建ref：my = createRef（）；

2.在父级引入child之后使用时增加ref

3.在子组件函数的第二个参数是ref

4.使用React.forwarRef()高阶组件

5.接收到的ref作为某个元素的属性值，属性名为ref

App.js

import  React, {createRef} from"react"
import child from "./child"
class App extends from Component{
        my  = createRef();
        render(){
              return (
                 <Child ref={this.my}></Child>  
              )
        }

}
export default App

Child.jsx

import React,{forwardRef} from "react"

funciton Child(props,ref){
        return(
               <div>
                         <div ref={ref}></div>
               </div>
              )
}

export default  forwardRef(Child);