在像模式和React一样的短信中从底部到顶部滚动

Question

我在网站上有一个模式，您可以在其中发送和接收消息。喜欢Twitter DM。当我打开对话时，我必须向下滚动以查看最新消息，但我希望对话在底部打开，所以我看到的第一件事是最新消息。我该怎么做？

这就是我得到的

            <Container>
              {messages.map(message =>
                message.user.id === currentUser.id ? (
                  <div key={message.id}>
                    <p style={textAlign: 'right'}>{message.body}</p>
                  </div>
                ) : (
                  <div key={message.id}>
                    <p style={textAlign: 'left'}>{message.body}</p>
                  </div>
                )
              )}
            </Container>

const Container = styled.div`
  margin-left: 5px;
  height: 34%;
  overflow: hidden;
  overflow-y: scroll;
  height: 90%;
`;

Answer 1

此解决方案使用最新的React Hook功能，因此您需要16.8 ，并且使用功能组件。

这是指向我的代码沙箱的链接。沙箱中的代码如下所示。

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
const styleMessageUserLabel = {
  borderRight: "1px solid black",
  padding: "0.105em 0.618em"
};
const styleMessage = {
  padding: "0.105em 0.618em"
};
function Message(props) {
  const { user, message } = props;
  return (
    <div style={{ display: "flex", margin: "0.309em" }}>
      <div style={styleMessageUserLabel}>{user}</div>
      <div style={styleMessage}>{message}</div>
    </div>
  );
}
const styleList = {
  listStyleType: "none",
  padding: 0
};
const styleItem = even => {
  return {
    padding: 0,
    margin: 0,
    background: even ? "none" : "#EFEFEF"
  };
};
function Conversation(props) {
  const { messages } = props;
  const messageList = (
    <ul style={styleList}>
      {messages.map((m, i) => (
        <li style={styleItem(i % 2 === 0)}>
          <Message user={m.user} message={m.text} />
        </li>
      ))}
    </ul>
  );
  return <div>{messageList}</div>;
}
const exampleMessages = [
  { user: "user1", text: "hey" },
  { user: "user2", text: "yo sup?" },
  { user: "user1", text: "nmu?" },
  { user: "user2", text: "chillin'" },
  { user: "user1", text: "cool cool" },
  { user: "user2", text: "what's good?" },
  { user: "user1", text: "life man" },
  { user: "user2", text: "that's what I'm talkin' 'bout" },
  { user: "user1", text: "word" },
  { user: "user2", text: "fo sho" },
  { user: "user1", text: "you down for tonight?" },
  { user: "user2", text: "we good" },
  { user: "user1", text: "solid" },
  { user: "user2", text: "cu lata" },
  { user: "user1", text: "oh, forgot to ask" },
  { user: "user2", text: "u bringin food" },
  { user: "user1", text: "pizza" },
  { user: "user2", text: "cowabunga!" },
  { user: "user1", text: "party on!" },
  { user: "user2", text: "excellent!!" },
  { user: "user1", text: "*air guitar*" },
  { user: "user2", text: "*air bass*" },
  { user: "user1", text: "*air drums*" },
  { user: "user2", text: "totally rad" },
  { user: "user1", text: "awesome" },
  { user: "user2", text: "righteous" }
];
const styleApp = {
  fontSize: "1.618em",
  fontFamily: "sans-serif"
};
function App() {
  const messagesEndRef = useRef(null);
  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };
  useEffect(scrollToBottom, [exampleMessages]);
  return (
    <div style={styleApp}>
      <Conversation messages={exampleMessages} />
      <div ref={messagesEndRef} />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);