выделите элемент на странице перезагрузки реагировать

Question

Я пытаюсь выяснить, как прокрутить элемент после перезагрузки страницы. Я пытаюсь ref элемент и прокрутить его после перезагрузки страницы.

Мой текущий пример просто прокрутит до конца страницы

const transactionRef = useRef(null)
const scrollToElemet = () => {
    transactionRef.current.scrollIntoView({ block: 'end', behavior: 'smooth' });
  }

  useEffect(scrollToElemet)

return (
  <div ref={transactionRef}></div>
)

Как я могу вычислить положение элемента и выделите его на странице перезагрузки? Спасибо

Answer 1

Добавление этого ответа, потому что запрос DOM в реакции является анти-паттерном:

export default function App() {
  const footerRef = useRef();

  useEffect(() => {
    footerRef.current.scrollIntoView();
  }, []);

  return (
    <>
      <div className="main">Main</div>
      <div ref={footerRef} className="footer">
        Footer
      </div>
    </>
  );
}

Answer 2

Я бы сказал, добавьте элемент внизу вашей страницы, а затем используйте этот элемент для прокрутки. Вот пример

https://codesandbox.io/s/jolly-dhawan-k7q8b?fontsize=14&hidenavigation=1&theme=dark

Кроме того, вам нужно передать [] в качестве второго аргумента, чтобы он прокручивался только при первом монтировании, иначе он будет продолжать прокручиваться вниз на каждое изменение или на каждом рендере.

function App() {
  const [checked, setChecked] = useState(false);
  useEffect(() => {
    document.getElementById("footer").scrollIntoView();
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <span onClick={() => setChecked(v => !v)}>{checked ? "Enable" : "Disable"}</span>
      <h2>Start editing to see some magic happen!</h2>
      <div className="main">Main</div>
      <div id="footer" className="footer">
        Footer
      </div>
    </div>
  );
}