react中如何获取结点内容
获取 DOM 结点内容的方法
在 React 中获取 DOM 结点内容可以通过多种方式实现，以下是常见的方法：
使用 ref 获取结点内容
通过 useRef 或 createRef 创建引用，绑定到目标结点后通过 ref.current 访问结点内容：
import React, { useRef } from 'react';
function Example() {
const divRef = useRef(null);
const handleClick = () => {
console.log(divRef.current.textContent); // 获取文本内容
console.log(divRef.current.innerHTML); // 获取 HTML 内容
};
return (
<div ref={divRef} onClick={handleClick}>
点击获取内容
</div>
);
}通过事件对象获取
在事件处理函数中，可以通过 event.target 直接访问触发事件的结点：
function handleClick(event) {
console.log(event.target.textContent);
console.log(event.target.getAttribute('data-custom')); // 获取自定义属性
}使用 document 查询（慎用）
在需要时可以通过传统 DOM 方法查询结点，但不符合 React 设计原则：
const element = document.getElementById('myElement');
console.log(element.textContent);动态内容获取方案
列表项内容获取
渲染列表时为每个项添加 ref，使用 ref 回调函数存储多个引用：
function List() {
const itemsRef = useRef([]);
itemsRef.current = [];
const addToRefs = (el) => {
if (el && !itemsRef.current.includes(el)) {
itemsRef.current.push(el);
}
};
return (
<ul>
{['A', 'B', 'C'].map((item) => (
<li key={item} ref={addToRefs}>
{item}
</li>
))}
</ul>
);
}表单控件内容获取
表单元素可以通过 ref 或受控组件方式获取值：
const inputRef = useRef();
// 通过 ref
console.log(inputRef.current.value);
// 受控组件方式
const [value, setValue] = useState('');
<input value={value} onChange={(e) => setValue(e.target.value)} />注意事项
- 避免过度使用
ref直接操作 DOM，优先考虑 React 的状态管理 - 在函数组件中使用
useRef，类组件中使用createRef ref在组件挂载完成后才会被赋值，访问时需做空值检查- 服务端渲染场景下谨慎使用 DOM 操作
以上方法覆盖了大多数需要获取结点内容的场景，根据具体需求选择合适的方式。
