如何在 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中文網其他相關文章！