如何捲動到 React 中的某個元素？

在React 中捲動到某個元素

在React 中，開發人員可能會遇到想要動態捲動到特定元素的情況，例如在聊天小部件中新新增的元素載入的訊息應該成為焦點。為了實現這一點，可以採用多種技術：

React 16.8，功能元件

利用useRef 鉤子，您可以建立對要捲動到的元素的動態參考：

const myRef = useRef(null);

const executeScroll = () => myRef.current.scrollIntoView();

建立參考後，您可以從事件處理程序或效果中呼叫executeScroll() 函數來執行滾動。

React 16.3 ，類別元件

對於類別元件，您有兩個選項：

選項1：使用createRef

constructor(props) {
  super(props)
  this.myRef = React.createRef()  
}

選項1：使用createRef

render() {
  return <div ref={ (ref) => this.myRef=ref }></div>
}

選項2：引用回呼

在這兩種情況下，您都可以使用 this.myRef.scrollIntoView() 捲動到元素。
• 注意事項

避免使用字串引用，因為它們已被棄用並且會影響效能。

html {
  scroll-behavior: smooth;
}

透過將以下CSS 新增至文件來啟用平滑捲動：

const MyComponent = () => {
  const myRef = useRef(null)
  return <ChildComponent refProp={myRef}></ChildComponent>
}

const ChildComponent = (props) => {
  return <div ref={props.refProp}></div>
}

將引用傳遞給子元件如果您想要的元素要捲動到位於子組件中，您可以使用以下技術：

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