アクティブなクラスを選択したアイテムに追加する反応

Question

反応する親コンポーネントを作成しました。ユーザーが2つのオプションのいずれかをクリックすると、別の子コンポーネントがレンダリングされます。

どのオプションが選択されているかによって、activeクラスを追加します。

以下のコードを参照してください。

私は多くのアプローチを取ってきましたが、私はそれを理解できなかったので、質問のためにそれらを取り除きました。

class Test extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      currentView: 'one' 
     }; 

     this.showOne = this.showOne.bind(this); 
     this.showTwo = this.showTwo.bind(this); 
    } 

    showOne() { 
     this.setState({ 
      currentView: 'one' 
     }); 
    } 

    showTwo() { 
     this.setState({ 
      currentView: 'two' 
     }); 
    } 

    render(){ 
    ...... 
     <p className="one" onClick={this.showOne}>One</p> 
     <p className="two" onClick={this.showTwo}>Two</p> 
    ...... 
    } 
} 

Answer 1

このようなものをお探しですか？

<p className={this.state.currentView === 'one' ? 'one active' : 'one'} onClick={this.showOne}>One</p> 
<p className={this.state.currentView === 'two' ? 'two active' : 'two'} onClick={this.showTwo}>Two</p>