Wie reagiert react-router Params über Requisiten an andere Komponenten?

Question

Bisher das Ausmaß meines Wissens darüber, wie Eigenschaften von einer Komponente zur anderen über Parameter übergeben werden, wird wie folgt

// beginnen: Umfang meines Wissens

Angenommen, einige Zustandsvariablen gibt es topic genannt in A.jsx. Ich will das B.jsx zu überliefern, so führe ich die folgende

B = require('./B.jsx') 
getInitialState: function() {return {topic: "Weather"}} 
<B params = {this.state.topic}> 

In B.jsx kann ich dann Sachen wie

module.exports = React.createClass({ 
render: function() { 
    return <div><h2>Today's topic is {this.props.params}!</h2></div> 
} 
}) 

tun das, wenn es aufgerufen wird „Das heutige Thema machen ist Wetter! "

// Ende: Umfang meines Wissens

Jetzt

, ich bin mit dem folgenden Code auf reagieren-Router über ein Tutorial geht Schnipsel

topic.jsx:

module.exports = React.createClass({ 
    render: function() { 
    return <div><h2>I am a topic with ID {this.props.params.id}</h2></div> 
    } 
    }) 

Routen .jsx:

var Topic = require('./components/topic'); 
module.exports = (
    <Router history={new HashHistory}> 
    <Route path="/" component={Main}> 
     <Route path = "topics/:id" component={Topic}></Route> 
    </Route> 

    </Router> 
) 

header.jsx:

wo this.state.topics ist eine Liste der Themen, die von der imgur API über Reflux gezogen werden.

Meine Frage ist: durch welchen Mechanismus wird params übergeben zu props für topic.jsx? Nirgendwo im Code sehe ich ein Idiom, wie es im obigen Abschnitt über den "Umfang meines Wissens" zum Ausdruck kommt. Es gibt keine <Topic params = {this.state.topics} /> in entweder routes.jsx oder header.jsx. Link zum full repo here. React-Router-Dokumente sagen, dass params "parsed out of the original URL's pathname" ist. Das hat bei mir nicht mitgespielt.

Answer 1

Das ist eine Frage über react-router Interna.

react-router ist eine React-Komponente selbst und verwendet props, um alle Routing-Informationen rekursiv an die untergeordneten Komponenten zu übergeben. Dies ist jedoch ein Implementierungsdetail von react-router und ich verstehe, dass es verwirrend sein kann, lesen Sie weiter für weitere Details.

Die Routing-Deklaration in Ihrem Beispiel ist:

<Router history={new HashHistory}> 
    <Route path="/" component={Main}> 
    <Route path = "topics/:id" component={Topic}></Route> 
    </Route> 
</Router> 

Also im Grunde React-Router durch jede der Komponenten in der Routing-Erklärung zum Anschlag (Main, Thema) und zu jedem folgenden Requisiten "pass" der Komponenten, wenn die Komponente mit der Methode React.createElement erstellt wird. Hier sind alle Stützen jede Komponente übergeben:

const props = { 
    history, 
    location, 
    params, 
    route, 
    routeParams, 
    routes 
} 

Die Stützen Wert, die durch verschiedene Teile react-router unter Verwendung verschiedenen Mechanismen berechnet werden (beispielsweise Daten von der URL-Zeichenfolge unter Verwendung von Ausdrücken regex Extrahieren).

Die Methode React.createElement selbst ermöglicht react-router ein Element zu erstellen und die Requisiten oben zu übergeben. Die Signatur der Methode:

ReactElement createElement(
    string/ReactClass type, 
    [object props], 
    [children ...] 
) 

Also im Grunde der Aufruf in der internen Implementierung wie folgt aussieht:

this.createElement(components[key], props) 

was bedeutet, dass react-router die Requisiten oben definiert verwendet jedes der Elemente zu initiieren (Main, Thema etc.), so dass erklärt, wie Sie auf this.props.params in den Topic Komponenten selbst zugreifen konnten, wurde es von react-router übergeben!