Come reagisce il router passa i parametri ad altri componenti tramite oggetti di scena?

Question

Finora, l'entità della mia conoscenza su come sono passati da un componente all'altro tramite parametri è la seguente

// iniziare: estensione della mia conoscenza

Supponiamo esiste qualche variabile di stato chiamato topic in A.jsx. voglio passare questo fino a B.jsx, così ho eseguire il seguente

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

In B.jsx posso poi fare cose come

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

che quando sono chiamati renderà "l'argomento di oggi è il tempo! "

// fine: estensione della mia conoscenza

Ora, sto attraversando un tutorial su reagiscono-router con il seguente codice frammenti

topic.jsx:

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

percorsi .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:

renderTopics: function() { 
    return this.state.topics.map(function(topic) { 
     return <li key = {topic.id} onClick={this.handleItemClick}> 
     <Link to={"topics/" + topic.id}>{topic.name}</Link> 
     </li> 
    }) 
    } 

dove this.state.topics è un elenco di argomenti tratti dall'imgur API tramite Reflux.

La mia domanda è: qual è il meccanismo è params passato per props per topic.jsx? In nessuna parte del codice vedo un idioma come espresso nella sezione precedente sulla "portata della mia conoscenza" vale a dire. non c'è <Topic params = {this.state.topics} /> in routes.jsx o header.jsx. Collegamento allo full repo here. I documenti React-router dicono che params è "parsed out of the original URL's pathname". Questo non ha risonanza con me.

Answer 1

Questa è una domanda sugli interni react-router.

react-router è un componente React e utilizza props per passare tutte le informazioni di routing ai componenti figli in modo ricorsivo. Tuttavia, questo è un dettaglio di implementazione di react-router e capisco che può essere fonte di confusione, quindi continua a leggere per maggiori dettagli.

La dichiarazione di routing nel tuo esempio è:

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

Quindi, fondamentalmente, Reagire-Router passerà attraverso ciascuno dei componenti della dichiarazione di routing (Main, argomento) e "pass" i seguenti oggetti di scena ad ogni dei componenti quando il componente viene creato utilizzando il metodo React.createElement. Ecco tutti gli puntelli passati a ogni componente:

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

I puntelli valori sono calcolati dalle diverse parti react-router utilizzando vari meccanismi (ad esempio estrazione dati dalla stringa URL utilizzando espressioni regex).

Il metodo React.createElement consente a react-router di creare un elemento e passare gli oggetti di scena sopra. La firma del metodo:

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

Quindi, in pratica la chiamata nella realizzazione interna assomiglia:

this.createElement(components[key], props) 

Il che significa che react-router utilizzati i puntelli sopra definiti per avviare ciascuno degli elementi (principale, Tema ecc.), in modo che sia spiegato come è possibile accedere allo this.props.params nei componenti Topic, è stato passato da react-router!