组件如何从 DOM 中移除/删除自身

How component can remove/delete itself from DOM?

本文关键字：删除自身 DOM 组件      更新时间：2023-09-26

假设我有以下JSX代码：

var List = React.createClass({
  render: function() {
    var Items = this.props.data.map(function(item) {
      return (
        <Item key={item.id}>
          {item.text}
        </Item>
      );
    });
    return (
      <div className="items">
        {Items}
      </div>
    );
  }
});
var Item = React.createClass({
  handleDelete: function(e) {
    e.preventDefault();
    // Delete this (only this) component completely (remove it from DOM).
  },
  render: function() {
    return (
      <div className="item">
          {this.props.children}
          <button className="delete" onClick={this.handleDelete}>Delete</button>
      </div>
    );
  }
});
ReactDOM.render(
  <List data={Array of items} />,
  document.getElementById('content')
);

我的问题是：项目如何在自己的handleDelete（）函数中完全删除/删除自己？

一种解决方案是让容器组件（即List）处理onDelete功能，然后更新其状态（跟踪已删除的项目）。然后在List的render()功能中，您可以过滤掉任何已删除的项目：

var List = React.createClass({
  getInitialState: function () {
    return { deleted: [] };
  },
  onDelete: function (id) {
    this.setState({ deleted: this.state.deleted.concat([id]) });
  },
  render: function() {
    var Items = this.props.data
      .filter(item => this.state.deleted.indexOf(item.id) === -1)
      .map(item => {
        return (
          <Item key={item.id} id={item.id} onDelete={id => this.onDelete(id)}>
            {item.text}
          </Item>
        );
      });
    return (
      <div className="items">
        {Items}
      </div>
    );
  }
});
var Item = React.createClass({
  render: function() {
    return (
      <div className="item">
          {this.props.children}
          <button className="delete" onClick={() => this.props.onDelete(this.props.id)}>Delete</button>
      </div>
    );
  }
});
ReactDOM.render(
  <List data={Array of items} />,
  document.getElementById('content')
);

如果你想从子组件本身中删除它，那么你可以试试这个：

ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);

但是，父组件总是比子组件修改自身更好。因此，您应该将逻辑放在父组件中以挂载所需数量的子组件，并且子组件应仅与父组件通信。

编辑

我不建议对提出的问题使用上述方法，我写了这个答案，因为这是卸载组件的方法之一。这是官方文档。当您想从父组件中删除一些子组件时，使用此方法完全没问题，这就是 ReactDOM 允许我们使用此功能的原因。

相关文章：