web-dev-qa-db-ja.com

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

これまでのところ、パラメータを介してプロパティが1つのコンポーネントから別のコンポーネントに渡される方法に関する私の知識の範囲は次のとおりです

//開始：私の知識の範囲

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>
}
})

呼び出されると、「今日のトピックは天気です！」

//終わり：私の知識の範囲

次に、次のコードスニペットを使用して、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から描画されたトピックのリストです。

私の質問はです。topic.jsxのparamsにどのようなメカニズムでpropsが渡されますか？上記の「私の知識の範囲」のセクションで表現されているように、コードのどこにもイディオムがありません。 routes.jsxまたはheader.jsxのいずれにも<Topic params = {this.state.topics} />はありません。 ここに完全なリポジトリ へのリンク。 React-routerのドキュメントでは、paramsは「 元のURLのパス名から解析された 」であると書かれています。これは私には共鳴しませんでした。

javascriptreactjsreactjs-fluxreact-routerrefluxjs
28
thetrystero

これは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はルーティング宣言（メイン、トピック）の各コンポーネントを通過し、React.createElementメソッドを使用してコンポーネントが作成されると、次の小道具を各コンポーネントに「渡します」。各コンポーネントに渡されるすべての小道具は次のとおりです。

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

Props値は、さまざまなメカニズムを使用してreact-routerのさまざまな部分によって計算されます（たとえば、正規表現を使用してURL文字列からデータを抽出します）。

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

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

したがって、基本的に内部実装の呼び出しは次のようになります。

this.createElement(components[key], props)

つまり、react-routerは上記の定義された小道具を使用して各要素（メイン、トピックなど）を開始したので、Topicコンポーネント自体でthis.props.paramsにアクセスする方法は、react-routerによって渡されました。

58
Faris Zacina