Wie machen Komponenten auf der gleichen Seite in reagieren

Question

In meinem Design auf der oben auf der Seite können Sie Bilder als Links sehen. Wenn Sie auf verschiedene Bilder klicken, wird die andere Komponente aufgerufen. Zum Beispiel Komponente onClick Methode zeigen, die auf true gesetzt ist:

state = { 
     showPage1: true, 
     showPage2: false, 
     showPage3: false, 
     showPage4: false 
     }; 
     onClick1 = e => 
     this.setState({ showPage1 : true, showPage2: false, showPage3: false, showPage4: false 
     }); 
     //continue with another onClick methods 

Und in der letzten Methode machen ist:

render(){ 
    const src = '/images/image.jpg' 
    return(
     <div> 
     <Image.Group size='tiny'> 
     <Image src={src} onClick={this.onClick1}/> 
     </Image.Group> 
     { this.renderPage() } 
     </div> 
    ) 
    } 

Und auf dieser Grundlage werden die verschiedenen Komponenten auf derselben Seite angezeigt .

renderPage() { 
    const showPage1 = this.state.showPage1; 
    if (showPage1) { 
     return (
      <Page1 submit={this.submit}/> 
    );} 

Jetzt ist jede Komponente ein Formular für mich, wo ein Benutzer Details übermittelt. Wenn Details übermittelt werden, kann ich nicht zu einer anderen Komponente umleiten. Zum Beispiel, wenn es Page1 ist, dann will ich automatisch zu Page2 umleiten und so weiter. Das habe ich jetzt, aber das funktioniert natürlich nicht. Ich bin mir nicht sicher, wie man eine Komponente nach einer anderen Komponente aufruft, wenn diese Komponente keine Verknüpfung hat, weil sie auf derselben Seite angezeigt wird.

submit = data => 
    this.props.saveComponent(data).then(() => this.props.history.push('/text')); 

Vielen Dank im Voraus!

Answer 1

Während es wahr ist, dass Routing eine nachhaltigere Lösung für dieses Problem ist, ohne Router installiert Reagiert es mir scheint, dass Sie nur Ihren Zustand aktualisieren müssen, nicht wahr? Sie könnten eine currentPage- und nextPage-Eigenschaft in data einfügen, um anzugeben, auf welche Seite gewechselt werden soll. Zum Beispiel:

submit = data => 
    this.props.saveComponent(data).then(
    () => this.setState({ 
     [data.currentPage]: false, 
     [data.nextPage]: true 
    }) 

Dies ist die Art von Aufgabe Router ziemlich gut für obwohl, so anstatt tat bedingte macht würde ich auf jeden Fall empfehlen, mehr über Routen zu lernen.