反应正向参考电流始终为空答案

【问题标题】：React forwardref current is always null反应正向参考电流始终为空
【发布时间】：2020-09-11 00:42:25
【问题描述】：

所以，我正在尝试为我的组件实现 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 始终未定义。

那么，我哪里做错了？

我的代码截图：

【问题讨论】：

useEffect在哪里使用？
@ShubhamKhatri useEffect 是 React API 的一部分。
显然我知道，在您的帖子中 useEffect 是独立于 MessagesFC 编写的。这就是造成混乱的原因，因为钩子不能在功能组件之外使用
@ShubhamKhatri 不是我的帖子，而且你知道它并不明显，因为你在问它在哪里定义并且答案在 React API 中。无论如何，我认为 scrollDivRef.current 是未定义的，因为引用只存在于 forwardRef 回调中。
这在很大程度上取决于您使用定义 MessagesFC 功能组件的方式和位置。请添加更多提供此信息的代码

标签： reactjs react-hooks ref

【解决方案1】：

首先你必须注意，在函数式组件中你必须使用useRef 来定义 ref 而不是 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 ]);

    ...
}

【讨论】：