react-router如何通过props将params传递给其他组件？ [英] 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：我的知识范围

//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: extent of my knowledge

现在，我将通过以下代码片段阅读react-router教程

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

topic.jsx：

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 docs说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 内部。

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.

您的示例中的路由声明是：

The routing declaration in your example is:

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

所以基本上，React-Router将遍历路由声明中的每个组件（Main，Topic） ）当使用 React.createElement 方法创建组件时，将以下props传递给每个组件。以下是传递给每个组件的所有道具：

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
}

道具值由 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 到创建一个元素并传递上面的道具。方法的签名：

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 使用上面定义的道具来启动每个元素（主要，主题等），以便解释如何在主题组件中访问 this.props.params 本身，它是通过 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将params传递给其他组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！