React Forwardref 当前始终为空

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 始终未定义。

那么，我哪里做错了呢？

我的代码截图：

Answer 1

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

其次，MessageFC 组件需要在父组件外部定义，而不是在其主体内部定义，否则会再次创建它的新实例，并且您将始终看到该组件被重新安装，这就是 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 ]);

    ...
}