反應正向參考電流始終為 null

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 始終未定義。

那么，我在哪里 go 錯了？

我的代碼截圖：

Answer 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 ]);

    ...
}