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作为道具传递给ColorModule组件，并在调用onRemove方法时将其传回到onRemoveModule。但是，响应会根据键进行优化，并且每个模块实例都有一个唯一的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

Answer 2

我最终使用来自@ShubhamKhatri的一些指导来解决这个问题（不知道有关唯一ID的生成！），但我采用了稍微不同的方法并使用{{1中的状态操作来处理解决方案无需在App组件中使用新方法。我也从来不知道ES6中的currying，所以发现传递了操作我的状态数组所需的索引值

如果我在这里偏离基础或效率低下，我仍然可以更好地接受反馈！

ColorModule

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

2 个答案: