react如何删除组件
删除 React 组件的几种方法
条件渲染法
通过状态控制组件是否渲染。当状态为 false 时，组件会被移除：
const [showComponent, setShowComponent] = useState(true);
return (
<div>
{showComponent && <MyComponent />}
<button onClick={() => setShowComponent(false)}>删除组件</button>
</div>
);动态列表过滤法
适用于列表中的组件删除。通过过滤数组状态实现：
const [items, setItems] = useState([{ id: 1 }, { id: 2 }]);
const handleDelete = (id) => {
setItems(items.filter(item => item.id !== id));
};
return (
<div>
{items.map(item => (
<div key={item.id}>
<MyComponent />
<button onClick={() => handleDelete(item.id)}>删除</button>
</div>
))}
</div>
);父组件控制法
将组件作为子组件，通过父组件状态决定是否传递子组件：
// 父组件
const Parent = () => {
const [shouldRender, setShouldRender] = useState(true);
return (
<div>
{shouldRender && <Child />}
<button onClick={() => setShouldRender(false)}>删除子组件</button>
</div>
);
};Key 强制重置法
通过改变 key 属性强制重新挂载组件（适用于需要完全重置的场景）：
const [key, setKey] = useState(0);
return (
<div>
<MyComponent key={key} />
<button onClick={() => setKey(prev => prev + 1)}>重置/删除组件</button>
</div>
);注意事项
- 组件被删除时会触发
componentWillUnmount生命周期（类组件）或useEffect的清理函数（函数组件）。 - 动态列表删除时需确保
key的稳定性，避免使用数组索引作为key。 - 如果组件包含订阅或定时器，需在卸载前手动清理。
