Как реагировать-маршрутизатор передает параметры другим компонентам через реквизит?

Question

До сих пор, насколько мне известно о том, как свойства передаются от одного компонента к другому с помощью параметров следующим образом

// старт: степень моего знания

Предположим, что существует определенная переменная состояния называется topic в A.jsx. Я хочу передать это вниз B.jsx, поэтому я выполнить следующие

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

В B.jsx я могу после этого делать вещи, как

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

, который при призвал будет оказывать «Сегодняшняя тема это Погода! "

// Конец: Насколько мне известно

Теперь я иду через учебник по среагировать-маршрутизатор со следующими фрагментами кода

topic.jsx:

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

маршруты .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> 
    }) 
    } 

где this.state.topics - это список тем, взятых из API imgur через Reflux.

Мой вопрос: каким механизм params передаваемый в props для topic.jsx? Нигде в коде я не вижу идиомы, выраженной в вышеприведенном разделе, о «степени моих знаний», а именно: нет <Topic params = {this.state.topics} /> в любом из путей.jsx или header.jsx. Ссылка на full repo here. В документах React-router говорится, что параметры «parsed out of the original URL's pathname». Это не вызвало у меня резонанса.

Answer 1

Это вопрос о react-router внутренности.

react-router является самим компонентом React, и он использует props, чтобы ретранслировать всю информацию о маршрутизации в дочерние компоненты. Тем не менее, это деталь реализации react-router, и я понимаю, что это может ввести в заблуждение, поэтому читайте дальше для более подробной информации.

Декларация маршрутизации в вашем примере:

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

Так в основном, React-маршрутизатор будет проходить через каждый из компонентов в декларации маршрутизации (Main, тема) и «передать» следующие реквизиты каждого компонентов, когда компонент создается с использованием метода React.createElement. Здесь все опоры, передаваемые каждому компоненту:

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

Опоры значения, вычисленные с помощью различных частей react-router с использованием различных механизмов (например, извлечение данных из строки URL с помощью регулярных выражений выражений).

Метод React.createElement сам позволяет react-router создать элемент и передать реквизит выше. Сигнатура метода:

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

Так в основном вызов во внутренней реализации выглядит следующим образом:

this.createElement(components[key], props) 

Это означает, что react-router используется реквизит, определенные выше для начала каждого из элементов (Main, тема и т. д.), так что объясняется, как вы могли получить доступ к this.props.params в самих компонентах Topic, он был принят react-router!