如何使用 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;

对所选元素执行操作

可以访问所需的元素元素，您现在可以执行所需的操作。在您的情况下，您希望执行 addPrecent 函数来更新进度条的完成百分比。

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

旧方法（不推荐）

用于访问 DOM 元素的旧方法包括使用字符串引用或回调引用：

字符串参考：

<Progressbar completed={25}>

回调参考：

<Progressbar completed={25}>

但是，由于潜在问题，不鼓励使用这些方法，并且将来可能会删除这些方法React 版本。

通过合并 ref，您可以有效地选择和操作特定的 DOM 元素，增强您的 React 应用程序的交互性和灵活性。

以上是如何使用 Refs 直接操作特定的 React 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！