如何在 React 中高效滾動到元素？

在React 中高效滾動到元素

在本文中，我們解決了在React 應用程式中管理滾動行為時面臨的常見挑戰：確保滾動焦點保持在新載入的元素上元素。我們提出了不同的方法來實現這一點，適用於 React 16.3 和 16.8 。

React 16.8 ，功能元件

利用 useRef 鉤子，我們為所需元素建立一個參考。透過呼叫綁定到該引用的scrollIntoView函數，我們可以平滑地捲動到該元素。

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

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

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

React 16.3，類別元件

對於類別元件，我們可以使用React.createRef建立一個參考()。 executeScroll 方法呼叫 ref 上的scrollIntoView函數來平滑捲動到所需的元素。

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 element
}

Ref Callback

或者，我們可以使用 ref 回調將 ref 附加到元素。此方法可確保將 ref 直接指派給 DOM 元素，而無需建立實例變數。

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

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

注意事項

• 避免字串引用： 字串引用對效能有影響，React 不鼓勵。
• 平滑捲動動畫： 可以透過在 html 元素的 CSS 中加入scroll-behavior: smooth 來啟用平滑捲動。
• 將 Ref 傳遞給子元件： 將 ref 傳遞給子元件時，將其指派給名稱不是「ref」的 prop，以避免衝突。

以上是如何在 React 中高效滾動到元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！