小编You*_*zef的帖子

我正在尝试将 Material UI 的Avatar与网站外部的图像一起使用。

<Avatar
   src={'http://localhost:3030/images/a/1651325908227-Capture.PNG'}
/>

如果我尝试使用在线源（不是我的本地服务器），似乎没问题：

<Avatar
   src={'https://mui.com/static/images/cards/basement-beside-myself.jpeg'}
/>

网站上的其他图像从同一后端正确加载。

我有一个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最后一条消息一起显示在底部。目前，整个页面滚动到底部，而不仅仅是线程中的消息。页面应保持静止。

我该怎么做呢？