react如何获取节点内容
获取节点内容的方法
在React中获取DOM节点内容可以通过多种方式实现，以下是常见的方法：
使用ref属性
通过useRef钩子或createRef方法创建引用，直接访问DOM节点：
import { useRef } from 'react';
function MyComponent() {
const divRef = useRef(null);
const handleClick = () => {
console.log(divRef.current.textContent); // 获取文本内容
console.log(divRef.current.innerHTML); // 获取HTML内容
};
return (
<div ref={divRef} onClick={handleClick}>
示例内容
</div>
);
}事件对象获取
通过事件对象直接访问触发事件的节点：
function MyComponent() {
const handleClick = (e) => {
console.log(e.target.textContent);
console.log(e.currentTarget.innerHTML);
};
return (
<button onClick={handleClick}>
点击获取内容
</button>
);
}使用document方法
通过传统DOM查询方法获取节点（需谨慎使用）：
function MyComponent() {
const handleClick = () => {
const node = document.getElementById('my-node');
console.log(node.innerText);
};
return (
<div id="my-node" onClick={handleClick}>
通过ID获取的内容
</div>
);
}动态子组件内容获取
当需要获取子组件内容时，可以使用React.ChildrenAPI：
function ParentComponent({ children }) {
React.Children.forEach(children, (child) => {
if (React.isValidElement(child)) {
console.log(child.props.children);
}
});
return <div>{children}</div>;
}注意事项
- 避免过度使用ref直接操作DOM，这违背React的设计原则
- 在函数组件中优先使用
useRef，类组件中使用createRef - 事件处理中
e.target和e.currentTarget有区别，前者是实际触发元素，后者是绑定事件元素 - 服务端渲染(SSR)环境下直接DOM操作会报错
