反应 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

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

其次，MessageFC组件需要定义在Parent组件之外而不是在它的body内部，否则会再次创建它的新实例，你将始终看到该组件正在重新挂载，这就是为什么 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 ]);

    ...
}

反应 forwardref 当前始终为空

React forwardref current is always null

ref

reactjs

react-hooks