React Hook 在頁面加載時滾動到溢出 div 的底部

Question

我只想滾動一個溢出的 div，同時將頁面的其余部分保持在正常的起始位置。 現在，我在調用UseEffect時遇到了Cannot read property 'scrollIntoView' of null錯誤的Cannot read property 'scrollIntoView' of null

代碼

import React, {Fragment, useEffect, useRef} from 'react';

const VideoPlayer = ({...foo...}) => {

   const chatRef = useRef(null)
       const scroll = () => {
           chatRef.current.scrollIntoView();
       }


   useEffect(() => {
           foo_function
           scroll()
       }, [foo_function]);

   }

   return (
   ...other-non-overflowing-div-content...

   <div>
      <div ref={chatRef}>
         <Link to={'/login'}>
           <p className='chat-sign-in'>Sign in to usechat</p>
         </Link>
       </div>
   </div>

   )
 }

Answer 1

您不需要useRef 。 嘗試使用回調引用。 您也可以將其作為具有相同簽名的函數傳遞。

<div ref={el => el.scrollintoview()}/>

或者

const cb = el => {
  foo();
  el.scrollintoview();
}

<div ref={cb}/>

Answer 2

使用useLayoutEffect代替useEffect

這是一個簡單用例的沙箱

https://codesandbox.io/s/crazy-pasteur-44rfz?file=/src/App.js