Reactjs Onclick ersetzen die vorhandene Komponente durch eine andere - Beispiel

Question

hatte jemand diese Situation, wo Sie eine vorhandene Komponente durch eine völlig andere ersetzen sollte - wie ein Akkordeon.

<ComponentA /> (+ image) - click on this 
<ComponentB /> (- image) - 

Soll ich hier Zustände verwenden? Und sollte ich separate Bilder auf jeder Komponente haben, aber wie man mit der Positionierung der Bilder genau an der gleichen Stelle umgehen. Ein einfaches Beispiel für die Kommunikation zwischen diesen Komponenten wäre hilfreich. Danke.

Answer 1

Ja, Sie müssen Zustände verwenden, um die Sichtbarkeit von Komponenten zu manipulieren. in Ihrer Render-Funktion können Sie so etwas wie diese

render(){ 
    return this.state && this.state.showComponent1 ? <ComponentA /> :<ComponentB /> 
} 

und in Ihrer Schaltfläche onClick Ereignis tun könnten Sie es wie diese

onClick =() => this.setState({showComponent1: !this.state.showComponent1})