Reactjsの小道具としてキーを渡す

Question

私はbaseballIndexとfootballIndexの状態を更新して、余分なコンポーネントを作ることなく独立して状態を保持できるようにしようとしています。たとえば、footballIndexを変更すると、baseballIndexを変更することは望ましくありません。

問題は、私が小道具を渡すと、子コンポーネントはキーのプロパティだけを更新できますが、キー自体は更新できません。

コードは以下であり、ここでJSFiddleへのリンクです：https://jsfiddle.net/reactjs/69z2wepo/

var Home = React.createClass({ 
    getInitialState: function() { 
    return { 
     baseballIndex: 0, 
     footballIndex: 0 
    }; 
    }, 

    increaseIndex: function(index) { 
    this.setState({index: this.state.index +1}) 
    }, 

    render: function() { 
    return <div> 
      <Tut sport={'Basbeall'} 
        index={this.state.baseballIndex} 
        increaseIndex={this.increaseIndex}/> 
      <Tut sport={'Football'} 
        index={this.state.footballIndex} 
        increaseIndex={this.increaseIndex}/> 
      </div> 
    } 
}); 

var Tut = React.createClass({ 
render: function() { 
    return <div> 
      <div> 
       {this.props.sport}: 
       {this.props.index} 
      </div> 
      <div style={{width: 30, height: 30, backgroundColor: 'red'}} 
        onClick={()=> {this.props.increaseIndex(this.props.index)}}> 
      </div> 
      </div>; 
    } 
}); 

ReactDOM.render(
    <Home/>, 
    document.getElementById('container') 
); 

Answer 1

ではなく、インデックスのincreaseIndex機能にスポーツ（「野球」または「サッカー」）を渡して試してみてください。たとえば<Tut>で：

var Tut = React.createClass({ 
render: function() { 
    return <div> 
      <div> 
       {this.props.sport}: 
       {this.props.index} 
      </div> 
      <div style={{width: 30, height: 30, backgroundColor: 'red'}} 
        onClick={()=> {this.props.increaseIndex(this.props.sport)}}> <--- Change this! 
      </div> 
      </div>; 
    } 
}); 

その後、あなたのincreaseIndex機能を変更します。

increaseIndex: function(sport) { 
    var stateKey = sport.toLowerCase() + 'Index'; // transform into your state's key 
    var newState = _.cloneDeep(this.state); // copy the current state 
    newState[stateKey] = newState[stateKey] + 1 // increment the state with specific index 
    this.setState(newState) // update the state 
    }, 

それが適切な状態を更新する必要があります。匿名の関数を使用することもできますが、多くの子供の場合はパフォーマンスが低下します。

ここはフィドルです：https://jsfiddle.net/69z2wepo/57095/