在 React 中選擇 DOM 元素

曾幾何時，每個 JavaScript 開發人員都使用過 getElementById() 方法。它接受一個引數 id 並返回一個具有該 ID 的 HTML 元素。此方法對於手動更改 DOM 非常有用。

抓取一個 HTML 元素節點是一種常見的需要。許多在 JavaScript 方面有經驗但對 React 框架不熟悉的開發人員想知道如何在 React 中執行此操作。

React 中的引用

Refs 是 references 的縮寫，是一種在 React 中訪問 DOM 的簡單方法。為了將元素（或元件）與引用連結，該元素必須具有等於你的 ref 的 ref 屬性。示例 <div> 元素可以通過以下方式連結到 testRef：<div ref={this.testRef}></div>。將 ref 例項儲存在變數中是一種很好的做法。

在功能元件中

自從大約兩年前引入鉤子以來，功能元件變得更加健壯。如果你執行的是現代版本的 React（例如 16.8.0），你可以匯入 useRef() 鉤子，它可用於定義一個引用。這是在渲染期間引用隨機變數的功能元件的示例：

function App() {
    const elementVariable = useRef(null)
    useEffect(() => console.log(elementVariable), [] )
    return (
        <div ref={elementVariable}>
           <h1></h1> 
        </div>
    )
}

在這個例子中，通過設定 elementVariable 等於 useRef() 鉤子的例項，我們將 HTML 節點儲存在變數中。

除非 HTML 元素將 ref 屬性設定為變數名稱，否則 Hook 將無法工作。

傳遞給 useRef() 鉤子的一個引數指定了 ref 例項的初始值。一旦 <div></div> 元素掛載，該變數將儲存 HTML 節點值。這是控制檯的樣子：

在類元件中

長期以來，使用類元件是建立互動式 React 元件的預設方式。

自 16.3 版釋出以來，React 開發人員可以使用 React.createRef() 來建立引用。API 可能不同，但 React.createRef() 和 useRef() 鉤子建立了本質上相同的 ref 例項。

在類元件中，ref 例項儲存在類屬性中。下面是一個例子：

class App extends Component {
  constructor(props){
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount(){
    console.log(this.ref);
  }
  render() {
    return <h1 ref={this.ref}>Referenced Text</h1>;
  }
}

如果你檢視控制檯，你將看到一個具有 current 屬性的物件，其中包含 HTML 節點。

使用 React 16.3 以上版本的開發人員必須使用稍微不同的語法來建立 refs。例子：

<div ref={(element) => this.ref = element}></div>

以這種方式建立的引用稱為回撥 ref，因為我們將 ref 屬性設定為回撥函式，該函式將 HTML 元素作為引數並將此值分配給類例項的 ref 屬性。