Question

我最近开始学习反应，也许我不完全明白它应该如何运作。

我创建了一个反应脚本

var Parent = React.createClass({
  getInitialState: function() {
    return {children: []};
  },
  onClick: function() {
    var childrens = this.state.children;
    childrens.push({
      name: this.props.name,
      index: this.state.children.length + 1,
      key: this.props.name + this.state.children.length + 1
    });
    this.setState({children: childrens});
  },
  onChildMinus: function(index) {
    var childrens = this.state.children;
    childrens.splice(index - 1, 1);
    this.setState({children: childrens});
  },
  render: function() {
    return (
      <div>
        <div className="parent" onClick={this.onClick}>
          {this.props.name}
          - Click Me
        </div>
        {this.state.children.map((child) => (<Child name={child.name} index={child.index} key={child.key} onMinusClick={this.onChildMinus}/>))}
      </div>
    );
  }
});

var Child = React.createClass({
  getInitialState: function() {
    return {selected: false};
  },
  onClick: function() {
    this.setState({selected: true});
  },
  onMinusClick: function() {
    if (typeof this.props.onMinusClick === 'function') {
      this.props.onMinusClick(this.props.index);
    }
  },
  render: function() {
    let classes = classNames({'child': true, 'selected': this.state.selected});
    return (
      <div className={classes}>
        <span onClick={this.onClick}>{this.props.name} {this.props.index}</span>
        <span onClick={this.onMinusClick}>Remove</span>
      </div>
    )
  }
});

ReactDOM.render(
  <Parent name="test"/>, document.querySelector("#container"));

https://jsfiddle.net/uqcxo1pg/1/

这是一个按钮，当你单击它时，它会创建一个带有数字的子元素，子元素上有一个删除按钮。

当你删除子元素时，它会从父数组中删除它，但它是如何使它更新所有子元素的，现在它具有正确的数字？

Answer 1

由于您在index中设置了孩子的onClick，因此在删除之前的子项时，该值永远不会更新。如果index上<Child/>的目的仅用于编号，则可以传递数组中子项的索引，而不是index中分配的onClick。如果您同时需要原始索引和订单，我建议您在<Child />添加另一个道具。

{this.state.children.map((child, index) => (
  <Child
    name={child.name}
    index={index}
    key={child.key}
    onMinusClick={this.onChildMinus}
  />
))}

https://jsfiddle.net/uqcxo1pg/2/

<强>更新

或者，如果您需要更新child.index，则必须重复this.state.children并重新编号。最有效的方法是从被移除的孩子的索引处开始，但这是蛮力的选择。

const renumberedChildren = this.state.children.map((child, index) => {
    child.index = index + 1;
    return child;
});

反应动态子组件编号

1 个答案: