当前位置：首页 > React

react如何获取标签内的文本

2026-01-26 01:02:20React

获取标签内文本的方法

在React中获取标签内的文本可以通过多种方式实现，具体取决于使用场景和需求。

使用ref获取DOM元素文本

通过React的useRef钩子可以获取DOM元素的引用，从而访问其文本内容。

import React, { useRef } from 'react';

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

  const handleClick = () => {
    console.log(textRef.current.textContent);
  };

  return (
    <div>
      <p ref={textRef}>需要获取的文本内容</p>
      <button onClick={handleClick}>获取文本</button>
    </div>
  );
}

通过事件对象获取

在事件处理函数中可以通过事件对象直接获取目标元素的文本内容。

function MyComponent() {
  const handleClick = (e) => {
    console.log(e.target.textContent);
  };

  return (
    <button onClick={handleClick}>点击获取文本</button>
  );
}

使用innerText/textContent属性

对于已获取的DOM元素，可以使用innerText或textContent属性获取文本内容。

function MyComponent() {
  const getText = () => {
    const element = document.getElementById('my-text');
    console.log(element.textContent); // 或 element.innerText
  };

  return (
    <div>
      <div id="my-text">示例文本</div>
      <button onClick={getText}>获取文本</button>
    </div>
  );
}

通过children属性获取

对于组件内部的子内容，可以通过props.children获取并进行处理。

function TextDisplay({ children }) {
  return <div>{children}</div>;
}

function ParentComponent() {
  return (
    <TextDisplay>
      <p>这是子组件中的文本</p>
    </TextDisplay>
  );
}

使用dangerouslySetInnerHTML

如果需要获取包含HTML标记的文本内容，可以使用dangerouslySetInnerHTML属性。

function MyComponent() {
  const htmlContent = '<span>带HTML标签的文本</span>';

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  );
}

每种方法适用于不同的场景，根据具体需求选择最合适的方式。使用ref是最常见的React方式，而通过DOM API直接访问则提供了更多灵活性。

react如何获取标签内的文本