React Dynamic Child Component Numbering

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/

Update

В качестве альтернативы, если вам нужно child.index обновить, вам придется перебрать this.state.children и пронумеровать их. Наиболее эффективным способом было бы начать с индекса удаленного ребенка, но это альтернатива грубой силы.

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