Reagieren Dynamische Menüpunkte über Router

Question

Eine weitere Antwort Frage hier, ich habe eine Lösung für mein Problem, aber für mich scheint es nicht sehr "Reagieren", so dass ich auf eine andere Lösung gehofft hatte.

Ich verwende reagieren Router so die Unterseite meines app.js (Einstiegspunkt) ist:

ReactDOM.render(

    <Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
    <IndexRoute component={Login} ></IndexRoute> 
     <Route path="searches" component={searches}></Route> 
     <Route path="notifications" component={notifications}></Route> 
    </Route> 
    </Router> 
    , app); 

Nun, wie Sie meine übergeordnete Komponente sehen können Layout-so ist, in meinem Kopf Ich möchte konfigurieren meine (wiederverwendbaren) Komponenten, zum Beispiel möchte ich, dass mein Layout den Titel der Menüelemente an die Header-Komponente weitergibt, und wenn ich zum Beispiel eine Suche lade, möchte ich vielleicht Funktionen usw. an die Suchkomponente übergeben, um sie zu haken hinein Funktionalität ist, so habe ich nach dem in Layout:

export default class Layout extends React.Component { 
    constructor() { 
    super(); 


    } 


    render() { 
     const containerStyle = { 
     paddingRight: '5px' 

     } 

     // Figure out which props we want based on location.pathname 
     const {pathname} = this.props.location; 

     switch(pathname){ 
     case "/searches": 
     // So now I need to add some props, functions or anything else to this component 
      theProps = {someProp: "value"} 
      const theComponent = React.cloneElement(this.props.children, {theProps}) 
      break; 
     } 
    return (

     < div style={containerStyle} class="container"> 
     < Header menuItems={this.getMenuItemsForScreen()}/ > 
     { theComponent} 

     < Footer/> 
     < /div> 
    ); 
    } 
} 

Also im Grunde, um Requisiten von meinem übergreifenden Layout zu übergeben, muss ich die Komponente klonen und dann noch ein paar Requisiten geben ?? Es fühlt sich nur ein bisschen dreckig an, aber ich kann keinen anderen Weg finden, diese Art von Logik einzubetten.

Dank

Marc

Answer 1

Ich denke, die große Sache über diese Routing-Komponenten ist, dass sie von diesem hässlichen Schalter in Ihren Komponenten speichern.

Ich bin nicht sicher, welche Art von Requisiten Sie an die Suchkomponente senden möchten. In Ihrer Frage ist nicht klar, was das eigentliche Problem ist, das Sie versuchen zu lösen, anstatt einen der Standardansätze in der react-router-Dokumentation zu verwenden.

Ich empfehle diese Alternative Berücksichtigung

1. Refaktorieren searches Komponenten keine Requisiten zu vermeiden, zu empfangen. Versuchen Sie, jede Route mit einer Komponente zu versehen, die keine Requisiten erhält. So bewegen Sie den Code, der die Stützen definiert (theProps = {someProp: "value"}) innerhalb der searches Komponente. Oder wenn Sie die Komponente searches mit diesen Requisiten und anderen Requisiten zu einem anderen Zeitpunkt erneut verwenden möchten, erstellen Sie eine neue übergeordnete Komponente, die diese Requisiten definiert, und ruft dann die Komponente searches auf. Aber wenn diese Requisiten komplex sind und von Ihrem App-Status abhängig sind, dann können Sie vielleicht auch flux, redux oder einen anderen Statuscontainer in Erwägung ziehen und diese aus dem App-Status holen.

2. Wenn Sie wirklich die Routing-Parameter benötigen, dann stellen Sie sicher, dass die Requisiten serialisiert werden können, so dass sie Teil der URL sein können. Schauen Sie sich die message Route im Code (kopiert von RouteConfiguration sample):

   import React from 'react' 
   import { render } from 'react-dom' 
   import { Router, Route, Link } from 'react-router' 
   
   const App = React.createClass({ 
       render() { 
       return (
        <div> 
        <h1>App</h1> 
        <ul> 
         <li><Link to="/about">About</Link></li> 
         <li><Link to="/inbox">Inbox</Link></li> 
        </ul> 
        {this.props.children} 
        </div> 
       ) 
       } 
   }) 
   
   const About = React.createClass({ 
       render() { 
       return <h3>About</h3> 
       } 
   }) 
   
   const Inbox = React.createClass({ 
       render() { 
       return (
        <div> 
        <h2>Inbox</h2> 
        {this.props.children || "Welcome to your Inbox"} 
        </div> 
       ) 
       } 
   }) 
   
   const Message = React.createClass({ 
       render() { 
       return <h3>Message {this.props.params.id}</h3> 
       } 
   }) 
   
   render((
       <Router> 
       <Route path="/" component={App}> 
        <Route path="about" component={About} /> 
        <Route path="inbox" component={Inbox}> 
        <Route path="messages/:id" component={Message} /> 
        </Route> 
       </Route> 
       </Router> 
   ), document.body) 
   

   In diesem Fall Code <a href={"/inbox/message/"+id} ...> irgendwo in Ihrem Code hat und diese werden die Requisiten zur Verfügung stellen, indem die id-Parameter in diesem Fall einstellen.