react-router 如何通过 props 将参数传递给其他组件? [英] How does react-router pass params to other components via props?

问题描述

到目前为止，我对如何通过参数将属性从一个组件传递到另一个组件的了解如下

Thus far, the extent of my knowledge about how properties are passed from one component to another via parameters is as follows

//开始:我的知识范围

//start: extent of my knowledge

假设在 A.jsx 中存在一个名为 topic 的状态变量.我想将其传递给 B.jsx，因此我执行以下操作

Suppose there exists some state variable called topic in A.jsx. I want to pass this down to B.jsx, so I perform the following

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

在 B.jsx 中我可以做类似的事情

In B.jsx I can then do stuff like

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

调用时将呈现今天的主题是天气！"

which when called upon will render "Today's topic is Weather!"

//end:我的知识范围

//end: extent of my knowledge

现在，我正在阅读有关 react-router 的教程，其中包含以下代码片段

Now, I'm going through a tutorial on react-router with the following code snippets

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:

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:

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 是通过 Reflux 从 imgur API 中提取的主题列表.

where this.state.topics is a list of topics drawn from the imgur API via Reflux.

我的问题是:params 是通过什么机制传递给 topic.jsx 的 props 的?在代码中，我没有看到上述关于我的知识范围"即的习语.在routes.jsx 或header.jsx 中没有<Topic params = {this.state.topics}/>.链接到此处的完整存储库.React-router 文档说 params 是从原始 URL 的路径名中解析出来的".这并没有引起我的共鸣.

My question is: by what mechanism is params passed in to props for topic.jsx? Nowhere in the code do I see an idiom as expressed in the above section on the "extent of my knowledge" viz. there is no <Topic params = {this.state.topics} /> in either routes.jsx or header.jsx. Link to the full repo here. React-router docs says that params is "parsed out of the original URL's pathname". This did not resonate with me.

推荐答案

这是一个关于 react-router 内部结构的问题.

That is a question about react-router internals.

react-router 本身就是一个 React 组件，它使用 props 将所有路由信息递归地传递给子组件.然而，这是 react-router 的一个实现细节，我理解它可能会令人困惑，所以请继续阅读以了解更多细节.

react-router is a React component itself and it uses props to pass all the routing information to the children components recursively. However, that is an implementation detail of react-router and i understand it can be confusing, so read on for more details.

示例中的路由声明是:

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

所以基本上，当使用 React.createElement 创建组件时，React-Router 将遍历路由声明中的每个组件(Main、Topic)并传递"以下道具给每个组件 方法.以下是传递给每个组件的所有道具:

So basically, React-Router will go through each of the components in the routing declaration (Main, Topic) and "pass" the following props to each of the components when the component is created using the React.createElement method. Here are all the props passed to each component:

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

props 值由 react-router 的不同部分使用各种机制(例如，使用正则表达式从 URL 字符串中提取数据)计算.

The props values are computed by different parts of react-router using various mechanisms (e.g. extracting data from the URL string using regex expressions).

React.createElement 方法本身允许 react-router 创建一个元素并传递上面的 props.方法签名:

The React.createElement method itself allows react-router to create an element and pass the props above. The signature of the method:

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

所以基本上内部实现中的调用看起来像:

So basically the call in the internal implementation looks like:

this.createElement(components[key], props)

这意味着 react-router 使用上面定义的 props 来启动每个元素(Main、Topic 等)，因此解释了如何访问 this.props.params 在 Topic 组件本身，是通过 react-router 传递的！

Which means that react-router used the props defined above to initiate each of the elements (Main, Topic etc.), so that explains how you could access this.props.params in the Topic components itself, it was passed by react-router!

这篇关于react-router 如何通过 props 将参数传递给其他组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！