react如何删除dom节点
删除DOM节点的方法
在React中删除DOM节点通常通过组件卸载或条件渲染实现。以下是几种常见方法：
使用条件渲染
通过状态控制组件的渲染，当条件不满足时组件会被自动卸载并从DOM中移除：
function MyComponent() {
const [show, setShow] = useState(true);
return (
<div>
{show && <ChildComponent />}
<button onClick={() => setShow(false)}>删除节点</button>
</div>
);
}使用ReactDOM.unmountComponentAtNode
对于非React管理的DOM节点，可以使用此方法卸载组件：
import ReactDOM from 'react-dom';
const container = document.getElementById('container');
ReactDOM.unmountComponentAtNode(container);使用ref手动删除
通过ref获取DOM节点引用后手动移除：
function MyComponent() {
const divRef = useRef(null);
const removeNode = () => {
if (divRef.current) {
divRef.current.remove();
}
};
return (
<div>
<div ref={divRef}>要删除的节点</div>
<button onClick={removeNode}>删除节点</button>
</div>
);
}动态列表删除
对于列表中的项目，通过过滤数组实现删除：
function ListComponent() {
const [items, setItems] = useState(['A', 'B', 'C']);
const removeItem = (index) => {
setItems(items.filter((_, i) => i !== index));
};
return (
<ul>
{items.map((item, index) => (
<li key={index}>
{item}
<button onClick={() => removeItem(index)}>删除</button>
</li>
))}
</ul>
);
}注意事项
- 优先使用React的声明式方式（条件渲染）而非直接操作DOM
- 直接操作DOM可能导致React的虚拟DOM与实际DOM不同步
- 删除节点前确保没有内存泄漏，特别是清理事件监听器和定时器
