反应动态子组件编号

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

由于您在onClick中设置子女的index，因此在删除先前子女时，该值永远不会更新。如果<Child/>上index的用途仅用于编号，则可以传递子阵列中的子索引，而不是在onClick中指定的index。如果你需要原始索引和订单，我会建议在<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; 
});