component如何可以remove/delete本身来自DOM？

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() 函数中完全 remove/delete 自己？

Answer 1

一种解决方案是让容器组件（即 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')
);

Answer 2

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

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

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

EDIT

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

component如何可以remove/delete本身来自DOM？

How component can remove/delete itself from DOM?

javascript

reactjs

react-jsx