如何在 React 中選擇 DOM 元素？ React 中 document.getElementById() 的等價物是什麼

在 React 中，與使用普通 JavaScript 不同，直接存取 DOM 元素是不同的。 React 使用虛擬 DOM 來有效地更新真實 DOM，這使得它與普通 JavaScript 不同。

如何存取DOM 元素

選項1：使用Refs

• 將Ref 與函數元件一起使用：(v16. 8.0) 使用useRef 和轉發參考。使用useRef 定義ref，然後使用forwardRef 將其轉送到DOM 元素。若要存取該元素，請使用 ref 的 current 屬性 (ref.current)。

選項2：使用React.createRef (v16.3 )

• 使用React.createRef() 建立一個ref 並將其附加到一個元素以便稍後訪問它。使用 ref.current 取得 DOM 節點。

選項3：使用回呼模式（舊版）

• 在JSX 中定義ref 屬性元素並傳遞一個接收DOM 元素引用的回呼函數。

選項4：使用字串引用（舊版）

• 透過將ref 屬性設定為標識DOM 元素的字串來使用字串引用。使用 this.refs.[stringRef].

範例

以下是使用回調模式選擇 DOM 元素的範例：

  render() {
    return (
      

        
要存取元素，可以使用 this.progressBars[0]、this.progressBars[1] 和 this.progressBars[2] 對它們執行操作。