当前位置：首页 > React

react你如何获取某标签

2026-01-25 06:54:56React

获取 DOM 标签的方法

在 React 中，可以通过 ref 属性获取 DOM 标签的引用。使用 useRef 钩子可以创建一个 ref 对象，并将其附加到目标标签上。

react你如何获取某标签

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

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

  useEffect(() => {
    console.log(myRef.current); // 输出 DOM 元素
  }, []);

  return <div ref={myRef}>目标标签</div>;
}

类组件中的 ref 使用

在类组件中，可以通过 React.createRef() 创建 ref，并将其赋值给标签的 ref 属性。

react你如何获取某标签

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

  componentDidMount() {
    console.log(this.myRef.current); // 输出 DOM 元素
  }

  render() {
    return <div ref={this.myRef}>目标标签</div>;
  }
}

回调 ref 的使用

回调 ref 是一种更灵活的方式，可以在 ref 被附加或分离时执行自定义逻辑。

function CallbackRefExample() {
  let textInput = null;

  const setTextInputRef = (element) => {
    textInput = element;
  };

  useEffect(() => {
    if (textInput) {
      console.log(textInput); // 输出 DOM 元素
    }
  }, []);

  return <input type="text" ref={setTextInputRef} />;
}

获取多个标签的 ref

如果需要获取多个标签的引用，可以为每个标签分配不同的 ref 对象。

function MultipleRefsExample() {
  const firstRef = useRef(null);
  const secondRef = useRef(null);

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

  return (
    <>
      <div ref={firstRef}>第一个标签</div>
      <div ref={secondRef}>第二个标签</div>
    </>
  );
}