在 React 中滚动到 div 的底部

作者

在 React 中滚动到 div 的底部

Scroll to the bottom of a div in React

在 React 中滚动到 div 的底部：

  1. 在底部添加一个元素div。
  2. ref在底部的元素上设置 a 。
  3. 当事件发生时，调用对象scrollIntoView()上的方法ref。
应用程序.js
import {useEffect, useRef, useState} from 'react';

export default function App() {
  const bottomRef = useRef(null);

  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // 👇️ simulate chat messages flowing in
    setInterval(
      () =>
        setMessages(current => [
          ...current,
          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, quaerat eum id obcaecati, magnam voluptatum dolorem sunt, omnis sed consectetur necessitatibus blanditiis ipsa? Cumque architecto, doloribus mollitia velit non sint!',
        ]),
      600,
    );
  }, []);

  useEffect(() => {
    // 👇️ scroll to bottom every time messages change
    bottomRef.current?.scrollIntoView({behavior: 'smooth'});
  }, [messages]);

  return (
    <div>
      <h2>Top of the page</h2>

      <div>
        {messages.map((message, index) => {
          return <p key={index}>{message}</p>;
        })}

        <div ref={bottomRef} />
      </div>
    </div>
  );
}

反应滚动到底部

div代码片段显示了每次新的聊天消息流入时如何滚动到底部。

对useEffect挂钩的第一次调用
模拟每600毫秒传入的新消息。

我们使用useRef钩子初始化了一个 ref
。

useRef()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的div元素。 ref

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们在第二个钩子中添加了messages状态变量作为依赖项useEffect，因为我们希望钩子中的代码在每次messages更改时都重新运行。
应用程序.js
useEffect(() => {
  bottomRef.current?.scrollIntoView({behavior: 'smooth'});
}, [messages]);

我们使用
scrollIntoView
方法滚动到div聊天消息容器底部的元素。

该behavior属性指定滚动是平滑动画 ( smooth) 还是立即发生 ( auto)。

该behavior属性的默认值为auto。

每次messages更改时，useEffect都会重新运行挂钩，我们调用
scrollIntoView()滚动到 div 底部并显示最新消息的方法。

–

发表评论