react如何删除组件

删除 React 组件的几种方法

条件渲染 通过状态或条件判断控制组件是否渲染。例如使用 && 或三元运算符：

{isVisible && <ComponentToRemove />}
{shouldRender ? <ComponentToRemove /> : null}

动态列表渲染 对于列表中的组件，通过过滤数据实现删除效果：

const [items, setItems] = useState([...]);
const handleDelete = (id) => {
  setItems(items.filter(item => item.id !== id));
};

卸载组件 使用 ReactDOM.unmountComponentAtNode() 强制卸载已挂载的组件（需谨慎使用）：

const element = document.getElementById('target');
ReactDOM.unmountComponentAtNode(element);

Portal 清理 如果组件通过 Portal 渲染到 DOM 其他位置，需要同时清理对应的 DOM 节点：

useEffect(() => {
  return () => {
    const portalNode = document.getElementById('portal');
    if (portalNode) portalNode.remove();
  };
}, []);

Key 强制更新 通过改变组件的 key 属性触发重新渲染：

<Component key={uniqueKey} />
// 修改 uniqueKey 会使旧组件被卸载并创建新实例