状態を変更した後に1つのコンポーネントだけをレンダリングする方法はありますか？

Question

<CardDetails />コンポーネントのうち、親がクリックされたコンポーネントを1つだけ表示するにはどうすればよいですか？コードを実行すると、状態を変更した後、すべてのCardDetailsコンポーネントがレンダリングされます。独自のonclickイベントと各コンポーネントの状態を追加する代わりに、別の方法がありますか？

class Deck extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     cardDetails: false 
     }; 
     // This binding is necessary to make `this` work in the callback 
     this.handleClick = this.handleClick.bind(this); 
     this.onClick = this.onClick.bind(this); 
    } 
    onClick() { 
     this.setState({ 
     cardDetails: true, 
     // when cardDetails is set as true, all <CardDetails /> components are rendered 
     }, function() { 
     console.log('cardDetails: ' + this.state.cardDetails + '. This.onclick: ' + this.onClick) 
     }); 
    } 
    render() { 
     return (< div className = "deck-container" > < div className = "chosen-cards" > 
     <CardHistory onClick = { 
       this.onClick 
      } > { 
       this.state.cardDetails ? < CardDetails/> : null 
      } < /CardHistory> 
      < CardHistory onClick = {this.onClick} > { 
       this.state.cardDetails ? < CardDetails/> : null 
      } < /CardHistory> </div > < /div>);}} 
      ReactDOM.render(<Deck> < /Deck>,document.getElementById('root')); 

Answer 1

CardDetailsコンポーネントにshouldComponentUpdateメソッドを追加します。また、状態値をpropsとして送信します。

shouldComponentUpdate(nextProps, nextState) { 
    return (nextprops.cardDetails != this.props.cardDetails); 
} 

これは基本的に、状態が変更されるたびにCardDetailsコンポーネントが再レンダリングされないようにします。