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

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

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

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

который при вызове будет отображать " сегодняшняя тема Погода!"

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

теперь я прохожу учебник по react-router со следующими фрагментами кода

темы.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>
)

заголовок.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 через рефлюкс.

у меня вопрос: по какому механизму params принят в props по теме.jsx? Нигде в коде я не вижу идиомы, выраженной в приведенном выше разделе о "степени моих знаний", а именно. нет <Topic params = {this.state.topics} /> в обе стороны.jsx или заголовка.jsx. Ссылка на полный РЕПО здесь. React-router docs говорит, что параметры"разобран из исходного пути URL-адреса". Это не произвело на меня впечатления.

26
javascript react-router reactjs reactjs-flux refluxjs

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

53