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

如何對特定的 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中文網其他相關文章！