如何使用 Refs 直接操作特定的 React 元素？-js教程-PHP中文網

如何使用 Refs 直接操作特定的 React 元素？

Linda Hamilton

發布： 2024-12-07 07:43:15

原創

454 人瀏覽過

How to Directly Manipulate Specific React Elements Using Refs?

如何對特定的 React 元素執行操作

在 React 中使用 DOM 元素時，經常會遇到需要選擇和操作特定元素的情況操縱使用者介面。在本例中，目標是根據使用者的選擇更新進度條元件。

重構程式碼以使用引用

要存取 React 中的 DOM 元素，我們可以利用「的概念」參考文獻。 ” Refs 提供了一種機制來創建對組件樹中特定元素的引用，從而可以直接訪問其屬性和方法。

在React 16.8（函數組件）中：

// Define the ref for the child component
const ChildRef = useRef(null);

// Forward the ref to the child component with React.forwardRef()
const Child = React.forwardRef((props, ref) => {
  // Receive and store the forwarded ref in useRef()
  ChildRef.current = ref;
  
  return <div>Child Component</div>;
});

登入後複製

在React 16.3中（類別組件）：

// Create a ref for the component instance
this.myRef = React.createRef();

// Pass the ref to the element within the render method
render() {
  return <div ref={this.myRef} />;
}

登入後複製

存取引用的元素：

一旦建立了引用，我們就可以使用以下方式存取DOM 元素：

const element = this.myRef.current;

登入後複製

對所選元素執行操作

可以存取所需的元素元素，您現在可以執行所需的操作。完成百分比。元素的舊方法包括使用字串引用或回呼參考：

document.getElementById(this.state.baction).addPrecent(10);

登入後複製

字串參考：

回呼參考：

<Progressbar completed={25}>

登入後複製

但是，由於潛在問題，不鼓勵使用這些方法，並且將來可能會刪除這些方法React版本。

以上是如何使用 Refs 直接操作特定的 React 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！