Question

假设我有以下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（）函数中完全删除/删除自己？

Answer 1

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

List

Answer 2

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

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

但是父对象操作子组件而不是子组件修改自身总是更好。因此，您应该将逻辑放在父组件中以挂载所需数量的子组件，而child应该只与父组件通信。

修改

我不建议对问题使用上述方法，我写了这个答案，因为这是卸载组件的方法之一。这是official doc.当你想从父组件中删除一些子组件时，使用这个方法是完全没问题的，这就是ReactDOM允许我们使用这个函数的原因。

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

2 个答案: