React 中优雅访问 DOM 元素的终极指南：使用 Refs 解锁 DOM 控制

2024-03-17 16:51:24

在 React 中优雅地访问 DOM 元素

在开发 React 应用程序时，你可能需要与底层 DOM 元素进行交互，无论是获取元素的引用以更新它的状态还是触发事件监听器。那么，如何在 React 中优雅且有效地做到这一点呢？

问题：document.getElementById() 的替代方案

传统的 DOM 操作方式，如使用 document.getElementById(), 在 React 中并不是最佳实践。React 采用了虚拟 DOM 的概念，管理和渲染应用程序的界面。直接访问 DOM 可能导致与虚拟 DOM 不一致，从而带来不可预测的行为和错误。

解决方案：拥抱 Refs

React 提供了 Refs 作为在组件中创建对 DOM 元素引用的安全方式。Refs 允许你将 DOM 节点与 React 组件实例关联起来，以便在需要时访问它们。

使用 Refs 的步骤

创建 Ref 对象： 使用 React.createRef() 创建一个新的 ref 对象，它将存储 DOM 元素的引用。
附加 Ref： 将 ref 对象作为第二个参数传递给 React 元素。例如：<div ref={myRef}>内容</div>。这会将 myRef 对象附加到该元素上。
访问元素： 在组件实例中，你可以使用 this.refs 对象来访问已附加的 refs。例如：this.refs.myRef.current。

应用示例

考虑以下示例，其中你需要获取进度条的引用以更新它的完成百分比：

修改后的代码：

import React, { useRef } from "react";

const Progressbar = (props) => {
  const ref = useRef(null);

  const addPercent = (percent) => {
    // 访问 DOM 元素并更新其完成百分比
    const element = ref.current;
    element.style.width = `${props.completed + percent}%`;
  };

  return <div ref={ref} className="progress-bar" style={{ width: `${props.completed}%` }}></div>;
};

export default Progressbar;