javascript - 如何删除由其父级状态实例化的 React 组件类的实例？

Question

(请原谅这个冗长的问题。我是 React 和 ES6 的新手，我可能对此过于复杂。)

我正在编写一个包含按钮组件的应用程序。此按钮调用方法onAddChild创建类 ColorModule 的另一个组件通过向存储在应用程序状态中的数组添加一个值。

在每个新创建的 ColorModule 中，我想添加另一个用于删除模块的按钮。由于该组件是由 array.map 创建的方法，我的想法是，如果我能找到与该组件对应的数组项的索引并在 array.splice 中使用该索引那么也许该组件将被删除(未经测试的理论)。也就是说，我不太确定如何找到在我的 onRemoveModule 中使用它的索引。方法。

由两部分组成的问题:1)我将如何查找我所在州的数组项的索引，2)如果我完全偏离基础或者有更好的方法来完成此操作，该解决方案看起来如何喜欢？

imports...

class App extends Component {

  static propTypes = {
    children: PropTypes.node,
  };

  constructor(props) {
    super(props);
    this.state = {
      // Here's the array in question...
      moduleList: [1],
    };
    this.onAddChild = this.onAddChild.bind(this);
    this.onRemoveModule = this.onRemoveModule.bind(this);
    this.className = bemClassName.bind(null, this.constructor.name);
  }

  onAddChild(module) {
    const moduleList = this.state.moduleList;
    this.setState({ moduleList: moduleList.concat(1) });
  }

  onRemoveModule( e ) {
    e.preventDefault();
    ...¯\_(ツ)_/¯
  }

  render() {
    const { className } = this;

    return (
      <div className={className('container')}>
        <Header onAddChild={this.onAddChild} /> /* Add module button lives here */
        <div className="cf">
          {this.state.moduleList.map(
            ( delta, index ) => {
              return (
                <ColorModule
                  className="cf"
                  onRemove={this.onRemoveModule}
                  key={index}
                  moduleId={'colorModule' + index}
                />
              ); /* Remove module button would live in the module itself */
            }
          )}
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

这部分非常简单，您所需要做的就是将 index 作为 prop 传递给 ColorModule 组件，并在调用 onRemove 时> 方法，您可以将其传递回 onRemoveModule。然而，React 基于键进行优化，为每个模块实例提供唯一的 id 是一个非常好的主意。

class App extends Component {

  static propTypes = {
    children: PropTypes.node,
  };

  constructor(props) {
    super(props);
    this.state = {
      // Here's the array in question...
      moduleList: [1],
    };
    this.onAddChild = this.onAddChild.bind(this);
    this.onRemoveModule = this.onRemoveModule.bind(this);
    this.className = bemClassName.bind(null, this.constructor.name);
  }

  onAddChild(module) {
    const moduleList = this.state.moduleList;
    this.setState({ moduleList: moduleList.concat(uuid()) }); //uuid must return a unique id everytime to be used as component key
  }

  onRemoveModule( index ) {
        // now with this index you can update the moduleList
  } 

  render() {
    const { className } = this;

    return (
      <div className="cf">
          {this.state.moduleList.map(
            ( delta, index ) => {
              return (
                <ColorModule
                  className="cf"
                  index={index}
                  onRemove={this.onRemoveModule}
                  key={delta}
                  moduleId={'colorModule' + delta}
                />
              ); 
            }
          )}
        </div>
    );
  }
}

现在在 ColorModule 组件中

class ColorModule extends React.Component {

     onRemoveClick=() => {
         this.props.onRemove(this.props.index);
     }

}

查看此答案以了解有关 how to pass data from Child component to Parent 的更多详细信息