滚动到映射数组的最后一项

Question

我有一个Message组件，可以在一个线程中显示所有消息（传入和传出）。

我希望最后一条消息/新输入的消息/传入消息始终显示在对话的底部。有点像所有聊天/消息应用程序的功能。

这是我的代码：

import React, { useRef } from "react";

const dummy = useRef();

...

dummy?.current?.scrollIntoView(true, {
    behaviour: "auto",
});

... 

<div className="">
  <Paper
    elevation={0}
    sx={{
      backgroundColor: "#fafafa",
      maxHeight: 200,
      overflow: "auto",
    }}
  >
    {messages.map((message, idx) => (
      <div key={idx} ref={dummy}>
        <Message message={message} name={name} />
      </div>
    ))}
    {/* I tried this also
    <div ref={dummy}></div> */}
  </Paper>
</div>

我希望当我单击对话/线程时，可以在父 div 中显示的所有消息都与maxHeight: 200最后一条消息一起显示在底部。目前，整个页面滚动到底部，而不仅仅是线程中的消息。页面应保持静止。

我该怎么做呢？

Answer 1

问题是您正在将 传递ref给渲染组件的div元素。Message我建议您div在聊天结束时使用虚拟对象，然后在组件更新时滚动到该虚拟对象。

return (
    <div
      className="messagesWrapper"
      style={{ background: "white", border: "2px red solid" }}
    >
      {messages.map((message) => (
        <span key={message}>{message}</span>
      ))}
      <div ref={dummy} />
    </div>
  );

ref 元素在 useEffect 中更新。

return (
    <div
      className="messagesWrapper"
      style={{ background: "white", border: "2px red solid" }}
    >
      {messages.map((message) => (
        <span key={message}>{message}</span>
      ))}
      <div ref={dummy} />
    </div>
  );

附上沙箱供参考。