W jaki sposób router reagujący przekazuje parametry do innych komponentów za pomocą rekwizytów?

Question

dotąd zakres mojej wiedzy o tym, jak właściwości są przekazywane od jednego elementu do drugiego za pomocą parametrów jest następująca

// start: zakres mojej wiedzy

Załóżmy, że istnieje jakiś zmienną stanu nazywa topic w A.jsx. chcę przekazać to w dół do B.jsx, więc wykonać następujące

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

W B.jsx mogę wtedy zrobić rzeczy jak

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

który po wezwany odda „Dzisiejszy temat jest Pogoda! "

// Koniec: zakres mojej wiedzy

Teraz idę przez tutorial reagować-router z następującym kodem fragmenty

topic.jsx:

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

trasy .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> 
    }) 
    } 

gdzie this.state.topics jest listą tematów zaczerpniętych z API imgur za pośrednictwem Reflux.

Moje pytanie brzmi:: przez co mechanizm params przekazany do props dla topic.jsx? Nigdzie w kodzie nie widzę idiomu wyrażonego w powyższej sekcji na temat "zakresu mojej wiedzy". nie ma numeru <Topic params = {this.state.topics} /> w pliku routes.jsx lub header.jsx. Link do full repo here. Dokumentacja routera React mówi, że parametrami są "parsed out of the original URL's pathname". To nie rezonowało ze mną.

Answer 1

To jest pytanie dotyczące wewnętrznych elementów modelu react-router.

react-router jest składnikiem reaktywnym i używa props do przekazywania rekurencyjnie wszystkich informacji o routingu do komponentów potomnych. Jednak jest to szczegół implementacji react-router i rozumiem, że może być mylące, więc czytaj dalej, aby uzyskać więcej szczegółów.

Deklaracja routingu w przykładzie jest:

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

Więc w zasadzie, React-Router będzie przejść przez każdy z elementów w deklaracji routingu (głównego tematu) i „pass” następujące rekwizyty do siebie komponentów, gdy komponent jest tworzony za pomocą metody React.createElement. Tutaj są podpory przekazywane do każdego składnika:

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

Podpory wartości są obliczane przez różne części react-router za pomocą różnych mechanizmów (np pobierania danych z adresu URL użyciu wyrażeń regex).

Metoda sama w sobie pozwala react-router stworzyć element i przekazać rekwizyty powyżej. Podpis metody:

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

Więc w zasadzie rozmowa w realizacji wewnętrznego wygląda następująco:

this.createElement(components[key], props) 

Czyli react-router wykorzystane rekwizyty zdefiniowane powyżej, aby zainicjować każdy z elementów (główny, Temat itp.), więc wyjaśnia, w jaki sposób można uzyskać dostęp do this.props.params w samych komponentach Topic, został przekazany przez react-router!