如何在React中引用DOM元素

了解如何在React中引用DOM元素

在構建應用程序時,React擅長從您那裡提取DOM。

但是,如果您想訪問React組件代表的DOM元素怎麼辦?

也許您必須像圖表庫一樣添加直接與DOM交互的庫,也許您需要調用某些DOM API或將重點放在元素上。

不管是什麼原因,一個好的做法是確保沒有其他方法可以直接訪問DOM。

在組件的JSX中,可以使用以下屬性將DOM元素的引用分配給組件屬性:

ref={el => this.someProperty = el}

將其放在上下文中,例如使用button元素:

<button ref={el => (this.button = el)} />

button引用組件的屬性,組件的生命週期方法(或其他方法)可以使用該屬性與DOM交互:

class SomeComponent extends Component {
  render() {
    return <button ref={el => (this.button = el)} />
  }
}

在功能組件中,機制是相同的,只是避免使用this(因為它沒有指向組件實例),而是使用屬性:

function SomeComponent() {
  let button
  return <button ref={el => (button = el)} />
}

免費下載我的反應手冊


更多反應教程: