Question

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

// start：我的知识范围

假设在A.jsx中存在一个名为topic的状态变量。我想把它传递给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>
}
})

当被召唤时将呈现＆＃34;今天的主题是天气！＆＃34;

//结束：我的知识范围

现在，我正在使用以下代码片段阅读react-router教程

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

我的问题是：params为topic.jsx传递给props的机制是什么？在代码中没有任何地方，我在上面的部分中看到了一个成语，关于我的知识范围＆＃34;即routes.jsx或header.jsx中没有<Topic params = {this.state.topics} />。链接到full repo here。 React-router docs说params是＆＃34; parsed out of the original URL's pathname＆＃34;。这并没有引起我的共鸣。

Answer 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）和＆＃34; pass＆＃34;使用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传递的！

react-router如何通过props将params传递给其他组件？

1 个答案: