React-组件-Ref转发

前言

React中的Ref转发是一种强大的技术，用于在函数式组件中传递和访问DOM元素或子组件的引用。它允许你在函数组件中像类组件一样使用Ref，使代码更清晰和可维护。

Ref转发的核心思想是使用React.createRef()创建一个Ref对象，然后将其传递给需要引用的组件或DOM元素。在函数组件内部，你可以使用forwardRef函数来将Ref对象传递给子组件，让子组件能够访问到父组件创建的Ref。

这种技术非常有用，特别是当你需要访问子组件内部的DOM元素或执行DOM操作时。它可以帮助你避免使用React的Context或Redux等全局状态管理工具，使组件之间的通信更直接和高效。

获取函数式组件中的元素

如果要获取的不是函数式组件本身, 而是想获取函数式组件中的某个元素，那么我们可以使用 Ref 转发 来获取。

在之前的文章当中演示了通过 Ref 获取函数式组件，但是在控制台报了一个警告，警告的内容如下：

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

意思就是告诉我们函数式组件不能够使用 Ref 你可能是想使用 React.forwardRef()，React.forwardRef() 是什么呢，它是一个高阶组件，是一个高阶函数，我们可以通过它来创建一个组件，通过它创建出来的组件就可以把外界设置的 Ref 传递给函数式组件的内部，然后在函数式内部通过这个传递过来的 Ref 进行获取函数式组件当中的元素即可。不管三七二十一，现在直接上代码：

import React from "react";

const About = React.forwardRef((props, myRef) => {
    return (
        <div ref={myRef}>
            <p>我是段落</p>
            <span>我是span</span>
        </div>
    )
});

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    render() {
        return (
            <div>
                <About ref={this.myRef}/>
                <button onClick={() => {
                    this.btnClick()
                }}>APP按钮
                </button>
            </div>
        )
    }

    btnClick() {
        console.log(this.myRef.current);
    }
}

export default App;

image-20220504133034455

输入图片说明

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

输入图片说明