Question

我有一个带有某些方法的Chat组件，并且它具有一段代码，该代码生成由两个人一个又一个地发送的消息。

render() {
    ...
    <div id="window" className="window">
        <div className="messages">
            {this._renderMessages()}
        </div>
    </div>
    ...
}

该方法仅生成更多的div，其样式取决于发送消息的人，并且window的垂直overflow设置为auto，但始终位于顶部

.window {
    border-radius: 10px;
    max-height: 264px;
    overflow: auto;
    overflow-x: hidden;
}

我试图通过window元素的ID并将其scrollTop的0设置为scrollHigh的值，但是它不起作用。没什么。

const window = document.getElementById("window");
window.scrollTop = window.scrollHeight;

我尝试将上面的代码放在componentWillMount和componentWillReceiveProps中，但没有一个起作用。我还尝试在ref上设置div并用this.refs.window访问它，尽管显示了值，但它也没有用。尝试分配值时我怎么了？

Answer 1

每次更新后（和初始渲染），您都需要运行滚动到底部的代码。这些操作的生命周期方法为componentDidMount（用于初始渲染的）和componentDidUpdate（用于后续更新的）。

类似

class YourComponent extends ...{
  constructor(props){
    super(props);
    this.window = React.createRef();
  }
  scrollToBottom(){
    const element = this.window.current;
    element.scrollTop = element.scrollHeight;
  }
  componentDidMount(){
    this.scrollToBottom()
  }
  componentDidUpdate(){
    this.scrollToBottom();
  }

  render() {
      ...
      <div id="window" className="window" ref={this.window}>
          <div className="messages">
              {this._renderMessages()}
          </div>
      </div>
      ...
  }
}

演示在https://codesandbox.io/s/y3qvv04l7j

请记住，您可能需要在每次更新后滚动到底部之前进行一些检查，例如，如果要允许滚动直到显示新数据等。

无法将此div滚动条放在底部

1 个答案: