react 滚到底部

在React中，要实现滚动到底部的功能，可以使用ref来引用DOM元素，并结合scrollTop属性来设置滚动位置。

首先，我们需要在组件中引入React的createRef方法来创建ref对象，例如：

import React, { createRef } from "react";

class ScrollToBottom extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  scrollToBottom = () => {
    this.myRef.current.scrollTop = this.myRef.current.scrollHeight;
  };

  render() {
    return (
      <div ref={this.myRef} style={{ height: "300px", overflow: "auto" }}>
        {/* 这里是组件内容 */}
      </div>
    );
  }
}

在上面的例子中，我们创建了一个名为myRef的ref对象，并将它应用到具有固定高度和滚动条的div元素上。我们要实现的功能是，当执行scrollToBottom方法时，这个div会滚动到底部。

scrollToBottom方法通过访问ref对象的current属性获取到DOM元素的引用，并设置它的scrollTop属性为scrollHeight。scrollHeight属性代表元素内容的总高度。

需要注意的是，为了在组件渲染完毕后准确捕捉到DOM元素的引用，我们将ref对象绑定到了div的ref属性上。

通过这样的方式，我们可以在React中实现滚动到底部的功能。当需要触发滚动时，只需调用scrollToBottom方法即可。