javascript - 每次更新后列表自动滚动到底部

Question

每当列表更新时，我都会尝试将消息列表自动滚动到底部。这是我的代码：

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import Message from "../components/message";
import MessageForm from "../containers/message_form";

import { fetchMessages } from "../actions";

class MessageList extends Component {
  componentWillMount() {
    this.fetchMessages();
  }

  componentDidMount() {
    this.refresher = setInterval(this.fetchMessages, 5000);
  }

  componentDidUpdate() {
    this.list.scrollTop = this.list.scrollHeight;
  }

  componentWillUnmount() {
    clearInterval(this.refresher);
  }

  fetchMessages = () => {
    this.props.fetchMessages(this.props.selectedChannel);
  };

  render() {
    return (
      <div>
        <div>
          <span>Channel #{this.props.selectedChannel}</span>
        </div>
        <div
          ref={(list) => {
            this.list = list;
          }}
        >
          {this.props.messages.map((message) => {
            return <Message key={message.id} message={message} />;
          })}
        </div>
        <MessageForm />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    messages: state.messages,
    selectedChannel: state.selectedChannel,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchMessages }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(MessageList);

每当通过表单提交消息或列表由创建的函数更新时，它不会自动滚动。我引用了受影响的列表组件，但它似乎不正确。你有什么建议吗？

标签： javascriptreactjsreduxreact-redux

Answer 1

您可以在组件末尾创建一个虚拟 div 并使用 scrollIntoView 滚动到底部。

检查这个以获取参考 如何在反应中滚动到底部？

如果我阻止了你，请竖起大拇指。