当前位置：首页 > React

react中如何获取到一个元素

2026-01-26 07:55:55React

使用 ref 获取 DOM 元素

在 React 中，可以通过 useRef 钩子或 createRef 方法创建 ref，并将其绑定到目标元素上。函数组件和类组件略有不同。

函数组件示例：

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    console.log(divRef.current); // 获取到 DOM 元素
  }, []);

  return <div ref={divRef}>目标元素</div>;
}

类组件示例：

import React, { createRef } from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = createRef();
  }

  componentDidMount() {
    console.log(this.divRef.current); // 获取到 DOM 元素
  }

  render() {
    return <div ref={this.divRef}>目标元素</div>;
  }
}

通过事件触发获取元素

可以通过事件对象（如 onClick）的 event.target 直接访问触发事件的 DOM 元素。

function handleClick(event) {
  console.log(event.target); // 获取点击的元素
}

function MyComponent() {
  return <button onClick={handleClick}>点击我</button>;
}

使用 document 方法查询

在特定场景下（如非受控操作），可以通过传统 DOM 查询方法获取元素，但需注意与 React 渲染周期的冲突。

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

return <div id="my-element">内容</div>;

动态绑定多个 ref

通过回调函数或 useRef 结合 useState 可以动态管理多个 ref。

回调函数方式：

function MyComponent() {
  const refs = {};

  const setRef = (key) => (element) => {
    refs[key] = element;
  };

  return (
    <>
      <div ref={setRef('header')}>头部</div>
      <div ref={setRef('content')}>内容</div>
    </>
  );
}

获取子组件中的 DOM 元素

使用 forwardRef 可以将父组件的 ref 传递给子组件的特定 DOM 元素。

const ChildComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>子组件内容</div>;
});

function ParentComponent() {
  const childRef = useRef(null);

  useEffect(() => {
    console.log(childRef.current);
  }, []);

  return <ChildComponent ref={childRef} />;
}