aktive Klasse zum ausgewählten Element hinzufügen reagieren

Question

Ich habe eine reaktive Elternkomponente erstellt und wenn ein Benutzer auf eine der beiden Optionen klickt, wird eine andere Kindkomponente gerendert.

Je nachdem, welche Option ausgewählt wurde, möchte ich eine active Klasse hinzufügen.

Siehe meinen Code unten.

Ich habe viele Ansätze genommen, aber habe sie für die Frage abgezogen, wie ich es nicht herausfinden konnte.

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

Suchen Sie etwas wie das?

<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>