如何在 React 中存取 DOM 元素：參考和最佳實踐指南？

如何在 React 中存取 DOM 元素？ React 中的 document.getElementById() 相當於什麼

在本文中，我們將探討 React 中存取 DOM 元素的方法。 React 是一個用於建立使用者介面的流行 JavaScript 程式庫，與普通 JavaScript 中使用的傳統方法相比，它提供了一種不同的 DOM 管理方法。 React 使用虛擬 DOM，它可以追蹤 UI 的狀態，從而更容易以聲明方式更新和管理 UI。

那麼，我們要如何存取 React 元件中的特定 DOM 元素？傳統上，在普通 JavaScript 中，我們依賴 document.getElementById() 等方法來定位和檢索 DOM 元素。在 React 中，有多種方法可以實現這一點，並且它們隨著時間的推移在不同的 React 版本中不斷發展。

使用字串引用（已棄用）：

在舊版本的 React 中，字串引用是通常用於存取 DOM 元素。它的工作原理如下：

<progressbar completed="{25}"></progressbar>

在此範例中，值為「Progress1」的 ref 屬性附加到 Progressbar 元件。要存取 DOM 元素，您可以使用：

var object = this.refs.Progress1;

但是，此方法被認為是遺留方法，並且可能會在未來的 React 版本中刪除。 Facebook 建議不要使用字串引用，因為有潛在問題，並鼓勵使用替代方法。

使用回調模式（建議用於React 16.2 及更早版本）：

React 16.2 和更早版本的建議方法早期的方法是使用回調模式，它允許在組件的渲染中直接存取DOM 元素方法：

<progressbar completed="{25}"></progressbar>

在此範例中，ref屬性定義為接收 DOM 元素作為參數的箭頭函數（在本例中為 input）並將其指派給組件中的陣列。這允許直接存取元件內的 DOM 元素。

使用 React.createRef() (React 16.3 ):

在 React 16.3 及更高版本中，React.createRef( ) 用於建立參考。您通常將建立的參考指派給建構函式中的實例變數：

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

要存取DOM 元素，可以使用：

const node = this.myRef.current;

建議使用此方法來存取DOM 元素在React 中，被認為是最佳實踐。

使用React.forwardRef() 和useRef() (React 16.8 ):

在React 16.8 引入的功能元件中，您可以使用React.forwardRef 和useRef 來建立參考並存取DOM 元素。 React.forwardRef 用來建立ref 轉送到DOM 元素，useRef 用來建立ref：

const Child = React.forwardRef((props, ref) => {
  return <div ref="{ref}">Child</div>;
});

const App = () => {
  const childRef = useRef(null);
  return <child ref="{childRef}"></child>;
};

來存取DOM 元素，你可以使用：

<progressbar completed="{25}"></progressbar>

注意： 不鼓勵使用字串引用，因此首選使用上述任何建議方法。 React 提供了各種存取 DOM 元素的選項，選擇取決於您使用的 React 版本。

以上是如何在 React 中存取 DOM 元素：參考和最佳實踐指南？的詳細內容。更多資訊請關注PHP中文網其他相關文章！