反應動態子組件編號

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