当前位置：首页 > React

react如何根据标签取元素

2026-01-25 01:08:02React

在React中根据标签名获取元素的方法

React提供了多种方式根据标签名获取DOM元素，以下是常用的几种方法：

使用ref属性获取元素

通过React的ref机制可以获取DOM节点引用，适用于类组件和函数组件。

类组件中使用ref

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

  componentDidMount() {
    const element = this.myRef.current;
    console.log(element); // 获取到的DOM元素
  }

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

函数组件中使用useRef

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

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

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

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

使用querySelector方法

在组件挂载后通过传统DOM方法查询元素

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const elements = document.querySelectorAll('div');
    console.log(elements); // 所有div元素集合
  }, []);

  return (
    <div>
      <div>元素1</div>
      <div>元素2</div>
    </div>
  );
}

使用ReactDOM.findDOMNode

这种方法主要用于类组件中获取组件对应的DOM节点

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    console.log(node); // 组件根DOM节点
  }

  render() {
    return <div>目标元素</div>;
  }
}

注意事项

ref方法是最推荐的React方式，具有更好的性能且符合React设计理念
querySelector方法会查询整个文档，可能影响性能
findDOMNode方法已被标记为遗留API，不建议在新代码中使用
在函数组件中，useRef是最常用的获取DOM引用的方式

获取特定标签的示例

获取所有button元素的示例：

react如何根据标签取元素

function ButtonComponent() {
  useEffect(() => {
    const buttons = document.querySelectorAll('button');
    buttons.forEach(btn => {
      console.log(btn.textContent);
    });
  }, []);

  return (
    <div>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  );
}