如何在 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:
  this.elementName
• 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中文网其他相关文章！