React 中如何实现组件自身从 DOM 中移除的功能？

React 遵循声明式的渲染逻辑，组件无法主动把自身从 DOM 树中移除，这个控制权必须交给渲染该组件的上层父组件来实现，具体方案如下：

实现思路 #

父组件通过状态控制子组件的渲染与否，子组件完成删除逻辑后，调用父组件传入的回调通知父组件更新状态，触发重渲染后对应组件就会自动被销毁移除。

具体代码修改 #

第一步：父组件侧逻辑调整 #

假设你是在商品列表页循环渲染的商品子组件，父组件需要维护商品列表状态，同时给子组件传入删除成功的回调函数，示例代码如下：

// 父组件类组件示例
class ProductList extends React.Component {
  state = {
    productList: [] // 存储所有商品数据的数组
  }

  // 处理子组件删除成功的逻辑
  handleDeleteProduct = (targetProductName) => {
    // 过滤掉要删除的商品，更新状态触发重渲染
    this.setState(prev => ({
      productList: prev.productList.filter(item => item.name !== targetProductName)
    }))
  }

  render() {
    return (
      <div>
        {this.state.productList.map(product => (
          <Product 
            key={product.name} 
            data={product}
            // 传入删除回调
            onDeleteSuccess={this.handleDeleteProduct} 
          />
        ))}
      </div>
    )
  }
}

第二步：修改你的子组件delete方法 #

直接在删除成功的分支调用父组件传入的回调即可：

async delete(){
  let request=await fetch('/admin/delete-product', {method: 'DELETE', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({productName: this.state.name})});
  let response=await request.json();
  if (response.result==='Sucess!'){
    alert('The product has been deleted!');
    // 调用父组件传入的回调，传入当前商品的唯一标识
    this.props.onDeleteSuccess(this.state.name);
  } else{
    alert('Error. Try again!');
  }
}

注意事项 #

• 不要直接用原生JS的DOM操作（比如removeChild）移除组件，会导致React虚拟DOM和真实DOM状态不一致，引发后续渲染异常。
• 如果你的组件不是列表项，是独立的弹窗/悬浮组件，逻辑也完全一致：父组件维护showComponent的布尔状态，子组件删除成功后调用回调让父组件把showComponent改为false，组件就会被移除。

内容的提问来源于stack exchange，提问作者user17089667