如何在 React 中滚动到聊天小部件的底部？

如何在 React 中滚动到某个元素

在本文中，我们将解决一个常见问题，即当有新消息时，聊天小部件的滚动条保持固定在顶部加载。我们的目标是将滚动条聚焦在前一个数组中的最后一个消息元素上。

解决方案

要解决此问题，我们需要：

1. 创建动态通过将索引传递给呈现消息元素的组件来引用。
2. 利用适当的滚动函数滚动到所需的元素。

React 16.8 ，功能组件：

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // Scroll to the element

  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll </button>
    </>
  );
};

React 16.3 ，类组件：

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

  render() {
    return <div ref={this.myRef}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.current.scrollIntoView(); // Scroll to the element
}

类组件 - 引用回调：

class ReadyToScroll extends Component {
  render() {
    return <div ref={(ref) => (this.myRef = ref)}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.scrollIntoView(); // Scroll to the element
}

重要提示：

• 避免使用字符串引用，因为它们会降低性能和可组合性。
• 要获得更平滑的滚动动画，请添加以下 CSS：

html {
  scroll-behavior: smooth;
}

• 将 ref 传递给子组件时，请以不同的方式命名 prop，以避免与原生的“ref”prop 发生冲突。

以上是如何在 React 中滚动到聊天小部件的底部？的详细内容。更多信息请关注PHP中文网其他相关文章！