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

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

//начало: степень моих знаний

Предположим, что существует некоторая переменная состояния, называемая 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 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>
    }
  })

routes.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? Нигде в коде я не вижу идиомы, выраженной в вышеприведенном разделе, о "степени моих знаний", а именно: в jsx или header.jsx нет <Topic params = {this.state.topics} />. Ссылка на полное репо здесь. В документах React-router говорится, что параметры "разбираются с исходным URL-адресом". Это не созвучно со мной.

Ответы

Ответ 1

Это вопрос о внутренних элементах react-router.

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

В вашем примере объявление маршрутизации:

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

В основном, React-Router будет проходить через каждый из компонентов в объявлении маршрутизации (Main, Topic) и "передавать" следующие реквизиты для каждого из компонентов, когда компонент создается с помощью метода 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, Topic и т.д.), чтобы объяснить, как вы могли получить доступ к this.props.params в самих компонентах Topic, он был передан react-router!