组件如何从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()函数中完全删除/删除自己？

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')
);