当前位置：首页 > React

react如何查

2026-01-13 09:37:45React

React 查询方法

React 提供了多种查询 DOM 元素的方式，以下是几种常见的方法：

使用 ref 通过 useRef 钩子可以获取 DOM 节点的引用，适用于直接操作 DOM 的场景。

react如何查

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  const handleClick = () => {
    console.log(myRef.current); // 获取 DOM 节点
  };

  return <div ref={myRef} onClick={handleClick}>Click me</div>;
}

使用事件对象 通过事件对象可以访问触发事件的 DOM 元素。

react如何查

function MyComponent() {
  const handleClick = (event) => {
    console.log(event.target); // 获取触发事件的 DOM 节点
  };

  return <button onClick={handleClick}>Click me</button>;
}

使用 document.querySelector 在 React 中也可以直接使用原生 DOM API 查询元素，但需谨慎使用以避免直接操作 DOM。

function MyComponent() {
  const handleClick = () => {
    const element = document.querySelector('.my-class');
    console.log(element);
  };

  return <div className="my-class" onClick={handleClick}>Click me</div>;
}

使用 useEffect 监听 DOM 变化 通过 useEffect 钩子可以在组件挂载或更新时查询 DOM 元素。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const element = document.getElementById('my-id');
    console.log(element);
  }, []);

  return <div id="my-id">Hello</div>;
}