目 录CONTENT

文章目录

回顾React React.forwardRef ref 转发

Hello!你好!我是村望~!
2022-11-16 / 0 评论 / 0 点赞 / 262 阅读 / 451 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

long time no 写React 项目了,最近有机会又在写react项目,对之前学习过 React.forwardRef ref 有点忘记了,这次来回顾复习一下~

ref 转发 也是高阶组件的一个应用场景,用来解决 函数组件没有办法通过ref获取实例组件对象的问题

首先我们写了一个函数组件 Scroll

import {forwardRef, memo} from "react";
import styled from "styled-components";

const ScrollWrapper = styled.div`
`

const Scroll = () => {
    return <ScrollWrapper>1</ScrollWrapper>
}
export default memo(Scroll)

然后在其他地方使用!我们想通过ref获取这个 Scroll 函数组件的 真实dom,但是你会发现无法获取,而且控制台会报错!

image

因为 React 不允许直接从函数式组件上面获取内部的dom!

它需要这个组件内部支持,需要允许!,那么如何支持呢那么就是这个函数组件支持ref转发
你传入ref给函数式组件~函数组件内部转发到 它想让你可以控制的dom上!这也能做到对封装组件内部dom的保护!

那么我们在封装 Scroll 组件的时候,就需要使用 React.forwardRef 来转发外部传入的 ref

import {forwardRef, memo} from "react";
import styled from "styled-components";

const ScrollWrapper = styled.div`
`

const Scroll = forwardRef((props, ref) => {
    // styled components 默认支持转发的!
    return <ScrollWrapper ref={ref}>1</ScrollWrapper>
})
export default memo(Scroll)

现在来看看那边能不能拿到函数组件的真实dom啦!

    const scrollRef = useRef(null)
    console.log(scrollRef)
    return (
        <div className="RecommendContainer">
            <Slider bannerList={bannerList}/>
            <RecommendList recommendList={recommendList}/>
            <Scroll ref={scrollRef}/>
        </div>
    )

image-1668569654872

OK ! everything is fine ! !所以这就是回顾一些这个API的用处!

0

评论区