如何在 React 中選擇 DOM 元素：「document.getElementById()」的替代方案？

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

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

如何存取DOM 元素

選項1：使用Refs

• 將Ref 與函數一起使用元件：(v16. 8.0) 使用useRef 和forwardRef。使用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 (
      <div>
        <Progressbar
          completed={25}
         >

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

以上是如何在 React 中選擇 DOM 元素：「document.getElementById()」的替代方案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！