如何在不使用 document.getElementById() 的情況下存取 React 中的 DOM 元素？

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

React 中存取 DOM 元素與普通 JavaScript 中傳統的 document.getElementById() 方法不同。 React 提供了多種選擇 DOM 元素的方法。

React Refs

Refs 讓您在 React 元件中建立 DOM 元素的參考。稍後可以使用此引用來存取 DOM 節點。

回調模式（建議）

在React 16.2 及更早版本中，建議使用refs 的方式是透過回呼模式：

<Progressbar completed={25}>

這將建立一個回調模式：

這將建立一個回調模式：

<Progressbar completed={25}>

這將建立一個回調模式函數，函數接收DOM 節點作為參數，並將其指派給元件中的Progress 陣列。 state.

字串引用

var object = this.refs.Progress1;

字串引用被視為舊版，不建議使用。但是，它們仍然可以在舊版本的 React 中使用。

要存取DOM 元素，請使用：

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }

請注意，字串參考可能會在未來版本中刪除React.

React.createRef ()

const node = this.myRef.current;

在React 16.3及更高版本中，使用React.createRef() 建立參考。

要存取DOM 元素，請使用：

const childRef = useRef(null);
return <div ref={childRef} />;

React Hook: useRef

const node = childRef.current;

在函數元件中( React 16.8 中引入），使用useRef 鉤子建立一個ref.

要訪問DOM 元素，請使用：透過使用這些方法，您可以存取和操作 React 元件中的 DOM 元素，從而可以更精細地控制Web 應用程式的互動和功能。

以上是如何在不使用 document.getElementById() 的情況下存取 React 中的 DOM 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！