如何在 React 中存取 DOM 元素？

在 React 中存取 DOM 元素

如何在 React 中取得 DOM 元素？

在 React 中，存取 DOM 元素是不像在傳統 JavaScript 中使用 getElementById() 那麼簡單。 React 以不同的方式處理 DOM 操作，優先考慮效能和虛擬 DOM 差異。

React Refs

要存取 React 中的 DOM 元素，您需要使用 refs。 Refs 是 React 維護 React 元件所建立的 DOM 元素的參考的一種方式。在React 中建立參考有多種方法：

• 字串參考（舊版）：
  在舊版本的React 中，您可以透過設定使用字串引用來存取元素字串的ref 屬性。但是，不鼓勵這種方法，並且可能會在未來版本中刪除。

• 回呼引用：
  建議的方法是使用回呼引用。使用回調引用，您可以將回呼函數作為 ref 屬性的值傳遞。此函數接收 DOM 元素作為其參數。

  範例：

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

• React.createRef（函數元件）：
  對於React 16.8中引入的功能元件，您可以使用React.createRef()。這將傳回一個可以指派給屬性的 ref 物件。

  示例：

  const myRef = React.createRef();
  
  const handleClick = () => {
    const node = myRef.current;
  }
  
  return <div ref="{myRef}" onclick="{handleClick}"></div>;

訪問元素

一旦創建了引用，您就可以訪問 DOM元素：如下：

• 舊字串引用：
  this.refs.elementName
• 回呼Refs:
  
回調Refs:React.createRef:
refObject.current

例如：

const node = this.refs.Progress1;
const node = this.Progress[0];
const node = myRef.current;

在您的特定情況下，您可以使用回呼引用來存取進度條元素並執行handleClick10函數：

handleClick10 = (e) => {
    const progressElement = this.refs[this.state.baction];
    if (progressElement) {
        progressElement.addPrecent(10);
    }
};

以上是如何在 React 中存取 DOM 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！