Verwenden einer Methode für eine React-Klasse aus einer separaten Komponente

Question

Auf der Startseite meiner Website können Sie auf eine Menüschaltfläche klicken, die eine Methode auslöst, die ein Menü umschaltet. Dies ändert den Zustand von menuOpen von false zu true.

Auf einer anderen Seite, ich klicke auf eine Schaltfläche "zurück", und es sollte auf die Home-Route gehen, aber öffnen Sie dieses Menü, wenn die Seite geladen hat, anstatt wenn ich klicke. Zur Zeit alles, was ich habe, ist:

handleBack(){ 
    App.navigate('/'); 
} 

Kann ich import die Komponente und ihre Methode aufrufen? Oder kann ich eine neue React Router-Route einrichten, die die Statusänderung irgendwie ausführt? Oder gibt es einen anderen Weg?

Answer 1

Redux würde helfen, aber da ich rate, dass du das nicht verwendest ODER du nicht deine gesamte Anwendung umgestalten willst, um diese einen booleschen Wert zu setzen, würde ich eine Komponente höherer Ordnung empfehlen.

export function menuToggler(ComposedComponent) { 

    return class extends React.Component { 
     toggleMenuBoolean() { 
      // code here 
     }, 
     render() { 
      return <ComposedComponent toggleMenuBoolean={toggleMenuBoolean} {...this.props} /> 
     } 
    }; 
} 

Dann in Ihrer normalen Komponente, Sie es einfach mit dem höheren Auftragskomponente wickeln:

So zum Beispiel, würden Sie eine höhere Ordnung Komponente (denken Sie übergeordnete Klasse) wie folgt definieren. Also, wenn zuvor Sie ES6 wurden mit und Export Ihrer Komponente wie folgt aus:

export default MyComponent; 

würde es dann geworden:

export default menuToggler(MyComponent); 

Von dort können Sie diese toggleMenuBoolean Funktion von jeder Komponente aufrufen, die durch gewickelt Ihre höherer Ordnung Komponente, indem sie einfach auf die Stützen Aufruf:

this.props.toggleMenuBoolean(false) usw.

Mehr lesen hier:

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.sh6m9c9ct

Answer 2

Wenn Sie dieses Szenario möchten, übergeben Sie den Statuswert an die übergeordnete Komponente, die eine "intelligente Komponente" ist, die dumme Komponenten verwaltet. Oder Sie können 'flux'/'redux' verwenden.