reactjs - 反应正向参考电流始终为空

Question

所以，我正在尝试为我的组件实现 react forwardref 示例，因为我想控制里面的滚动条。

这是我所拥有的：

const MessagesFC = React.forwardRef((props, ref) => {       
    return <Flex
        className={"Messages"}
        direction={"Column"}
        ref={ref}>
        {messages}
    </Flex>
});

const scrollDivRef = React.createRef<any>();

React.useEffect(() => {
    scrollDivRef.current?.scrollIntoView({ behavior: "smooth"})
}, [ scrollDivRef, chatRoom.messages ])

在我的 return() 中，组件是这样添加的：

<MessagesFC 
    ref={scrollDivRef}/>

似乎就像在示例中一样设置。

但是，在执行此代码时，scrollDivRef.current 始终未定义。

那么，我哪里做错了？

我的代码截图：

标签： reactjsreact-hooksref

Answer 1

首先，您必须注意，在功能组件中，您必须使用useRef来定义 ref 而不是 React.createRef 因为 useRef 每次都会返回相同的 ref 实例，而 React.createRef 会给您一个不同的 ref 实例

其次，MessageFC 组件需要在 Parent 组件之外而不是在其主体内部定义，否则会再次创建它的新实例，并且您将始终看到组件被重新安装，这就是为什么 useEffect 内部的 scrollDivRef 不会给您准确的原因信息

第三，您不需要将 scrollDivRef 作为依赖项添加到 useEffect。

const MessagesFC = React.forwardRef((props, ref) => {       
    return <Flex
        className={"Messages"}
        direction={"Column"}
        ref={ref}>
        {messages}
    </Flex>
});

const Parent = () => {
    const scrollDivRef = React.useRef<any>();

    React.useEffect(() => {
        scrollDivRef.current?.scrollIntoView({ behavior: "smooth"})
    }, [ chatRoom.messages ]);

    ...
}