React 直接操作 DOM

zy0101012025-03-31 8:36

React 直接操作 DOM

一般而言，我们在 React 中使用虚拟 DOM 来操作 DOM，但是有些时候，我们需要直接操作 DOM。在 React 中，我们可以使用 useRef 这个 Hook 函数来获取 DOM 元素。分为以下两个步骤：

在组件中定义一个 ref，并通过 useRef Hook 创建一个 ref 对象，并将其赋值给组件的 ref 属性。
在组件中通过 ref.current 访问 ref 对象，获取 DOM 元素。
以下是一个简单的例子，展示如何在 React 中直接操作 DOM：

js 复制代码

import { useRef } from 'react';

function App() {
  // 创建一个 ref 对象
  const inputRef = useRef(null);
  return (
    <div>
      {/* 绑定一个 ref 到 input 组件 */}
      <input ref={inputRef} />
      <button
        onClick={() => {
          // 通过 ref 对象获取输入框组件
          console.log(inputRef.current);
          console.dir(inputRef.current);
        }}
      >
        聚焦输入框
      </button>
    </div>
  );
}

export default App;

这个例子中，我们首先使用 useRef Hook 创建了一个名为 inputRef 的 ref 对象，并将其赋值给组件的 ref 属性。然后，在组件中，我们通过 ref.current 访问该 ref 对象，获取到 DOM 元素。最后，我们通过 ref.current 就可以获取到 DOM 元素。

需要注意的是，在 DOM 可用时，我们才能够使用 ref.current 访问 DOM 元素。因此，在组件渲染之前，我们无法获取到 DOM 元素。