Javascript react-router 如何通过 props 将参数传递给其他组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32901538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does react-router pass params to other components via props?
提问by thetrystero
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
//开始：我的知识范围
Suppose there exists some state variable called topicin A.jsx.
I want to pass this down to B.jsx, so I perform the following
假设存在一个topic在 A.jsx 中调用的状态变量。我想把它传递给 B.jsx，所以我执行以下操作
B = require('./B.jsx')
getInitialState: function() {return {topic: "Weather"}}
<B params = {this.state.topic}>
In B.jsx I can then do stuff like
在 B.jsx 中，我可以做类似的事情
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
//结束：我的知识范围
Now, I'm going through a tutorial on react-router with the following code snippets
现在，我正在阅读有关 react-router 的教程，其中包含以下代码片段
topic.jsx:
主题.jsx：
module.exports = React.createClass({
render: function() {
return <div><h2>I am a topic with ID {this.props.params.id}</h2></div>
}
})
routes.jsx:
路线.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:
头文件.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>
})
}
where this.state.topicsis a list of topics drawn from the imgur API via Reflux.
哪里this.state.topics是通过 Reflux 从 imgur API 中提取的主题列表。
My question is: by what mechanism is paramspassed in to propsfor 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.
我的问题是：通过什么机制params传递给propstopic.jsx？在代码中，我没有看到上一节中关于“我的知识范围”即的习语。<Topic params = {this.state.topics} />route.jsx 或 header.jsx 中都没有。链接到这里的完整回购。React-router 文档说 params 是“从原始 URL 的路径名中解析出来的”。这并没有引起我的共鸣。
回答by Faris Zacina
That is a question about react-routerinternals.
那是关于react-router内部的问题。
react-routeris a React component itself and it uses propsto pass all the routing information to the children components recursively. However, that is an implementation detail of react-routerand i understand it can be confusing, so read on for more details.
react-router是一个 React 组件本身，它用于props将所有路由信息递归地传递给子组件。但是，这是 的实现细节，react-router我理解它可能会令人困惑，因此请继续阅读以了解更多详细信息。
The routing declaration in your example is:
您示例中的路由声明是：
<Router history={new HashHistory}>
<Route path="/" component={Main}>
<Route path = "topics/:id" component={Topic}></Route>
</Route>
</Router>
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.createElementmethod. Here are all the props passed to each component:
所以基本上，React-Router 将遍历路由声明（Main、Topic）中的每个组件，并在使用该React.createElement方法创建组件时将以下道具“传递”给每个组件。以下是传递给每个组件的所有道具：
const props = {
history,
location,
params,
route,
routeParams,
routes
}
The props values are computed by different parts of react-routerusing various mechanisms (e.g. extracting data from the URL string using regex expressions).
props 值由react-router使用各种机制的不同部分计算（例如，使用正则表达式从 URL 字符串中提取数据）。
The React.createElementmethod itself allows react-routerto create an element and pass the props above. The signature of the method:
该React.createElement方法本身允许react-router创建一个元素并传递上面的道具。方法签名：
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)
So basically the call in the internal implementation looks like:
所以基本上内部实现中的调用看起来像：
this.createElement(components[key], props)
Which means that react-routerused the props defined above to initiate each of the elements (Main, Topic etc.), so that explains how you could access this.props.paramsin the Topiccomponents itself, it was passed by react-router!
这意味着react-router使用上面定义的 props 来启动每个元素（Main、Topic 等），这样就解释了如何this.props.params在Topic组件本身中访问它，它被react-router!
