react如何获取标签文本内容
获取标签文本内容的方法
在React中获取DOM元素的文本内容可以通过多种方式实现，以下是常见的几种方法：
使用ref获取文本内容
通过useRef钩子创建引用并绑定到目标元素上，通过current属性访问DOM节点后获取textContent或innerText。
import React, { useRef } from 'react';
function Example() {
const elementRef = useRef(null);
const handleClick = () => {
console.log(elementRef.current.textContent);
};
return (
<div>
<p ref={elementRef}>需要获取的文本内容</p>
<button onClick={handleClick}>获取文本</button>
</div>
);
}通过事件对象获取
在事件处理函数中，通过event.target访问触发事件的元素，直接提取文本内容。
function Example() {
const handleClick = (event) => {
console.log(event.target.textContent);
};
return (
<button onClick={handleClick}>点击获取按钮文本</button>
);
}使用children属性
如果目标元素是组件的子节点，可以通过props.children获取子元素后再提取文本。
function ParentComponent({ children }) {
const text = React.Children.toArray(children)
.filter(child => typeof child === 'string')
.join('');
return <div>{text}</div>;
}
// 使用方式
<ParentComponent>需要提取的文本</ParentComponent>注意事项
textContent会获取所有子节点的纯文本（包括隐藏元素），而innerText会考虑CSS样式且性能略低。- 直接操作DOM在React中应谨慎使用，优先考虑通过状态管理数据流。
- 在函数组件中必须使用
useRef而非直接操作DOM，类组件可使用createRef。
