反応ルータはどのように小道具を介して他のコンポーネントにパラメータを渡すのですか？

Question

はこれまで、プロパティはパラメータを経由して別のコンポーネントから渡される方法についての私の知識の程度は

//開始以下のとおりである：私の知識の程度は中topicをいくつかの状態変数が存在すると仮定し

と呼ばれますA.jsx。 私は、その後に呼び出さ

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

ようなものは、「今日の話題をレンダリングします行うことができます私はB.jsxにこれを伝承したいので、私はB.jsxで、次の

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

を行います天気です！ "

//エンド：

module.exports = React.createClass({ 
    render: function() { 
    return <div><h2>I am a topic with ID {this.props.params.id}</h2></div> 
    } 
    }) 

ルート：さて、私は次のコードで反応し、ルータ上のチュートリアルをつもりだ私の知識の範囲

は

topic.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：

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は、imgur APIからRefluxを使用して作成されたトピックのリストです。

私の質問はです：どのようなメカニズムによってparamsはtopic.jsxためpropsに渡されますか？コードのどこにも、私の知識の範囲、すなわち上記のセクションで表現されたイディオムがあります。 routes.jsxまたはheader.jsxには<Topic params = {this.state.topics} />がありません。 full repo hereへのリンクReact-router docsによると、paramsは "parsed out of the original URL's pathname"です。これは私と共鳴しませんでした。

Answer 1

これはreact-router内部についての質問です。

react-routerは、リアクションコンポーネント自体であり、すべてのルーティング情報を子コンポーネントに再帰的に渡すためにpropsを使用します。しかし、それはreact-routerの実装の詳細です。私はそれが混乱する可能性があることを理解しています。

あなたの例では、ルーティングの宣言は次のとおりです。

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

だから、基本的には、リアクト・ルータは、それぞれに次の小道具をルーティング宣言（メイン、トピック）での各コンポーネントを通過し、「合格」しますコンポーネントがReact.createElementメソッドを使用して作成されたときのコンポーネントの値はreact-router使用して様々なメカニズムの異なる部分によって計算された小道具（例えば正規表現式を使用してURL文字列からデータを抽出する）

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

：ここで各コンポーネントに渡されるすべての小道具です。

React.createElementメソッド自体では、react-routerは要素を作成し、上記の小道具を渡すことができます。メソッドのシグネチャは：

this.createElement(components[key], props) 

react-router、要素（メイントピックの各々を開始するために上記で定義された小道具を使用することを意味する：

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

そこで、基本的に内部実装におけるコールは次のように見えますなど）は、Topicコンポーネント自体にthis.props.paramsにアクセスする方法を説明しています。これはreact-routerに渡されました。