react如何操作节点数据
操作节点数据的常见方法
在React中操作DOM节点数据通常通过ref实现，以下是几种典型场景的解决方案：
使用useRef创建引用
通过useRef钩子创建引用并绑定到DOM元素，后续可直接操作节点：
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus(); // 操作DOM节点
console.log(inputRef.current.value); // 获取节点数据
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Focus Input</button>
</>
);
}回调形式的ref
当需要动态管理多个ref时，可使用回调函数形式的ref：
function Component() {
let elementsRef = useRef(new Map());
const registerRef = (node, key) => {
if (node) {
elementsRef.current.set(key, node);
} else {
elementsRef.current.delete(key);
}
};
// 通过key访问特定节点
// elementsRef.current.get('header').scrollIntoView();
}forwardRef传递引用
需要跨组件操作子组件DOM节点时，使用forwardRef：
const FancyInput = forwardRef((props, ref) => {
return <input ref={ref} className="fancy" />;
});
function Parent() {
const inputRef = useRef();
// 可通过inputRef操作子组件DOM
return <FancyInput ref={inputRef} />;
}动态修改节点属性
通过ref获取节点后直接修改DOM属性：
const divRef = useRef();
useEffect(() => {
if (divRef.current) {
divRef.current.style.color = 'red';
divRef.current.dataset.custom = 'value';
}
}, []);注意事项
- 避免直接大量操作DOM，优先考虑状态驱动
- 服务端渲染场景下需检查ref.current是否存在
- 对于表单控件，推荐使用受控组件方式管理数据
- 需要测量DOM尺寸时，考虑使用ResizeObserver替代直接读取
对于需要复杂DOM操作的场景，可以结合第三方库如react-use-measure或直接使用浏览器API实现。
