30

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

//start: 私の知識の範囲

topicA.jsx で呼び出される状態変数が存在するとします。これを 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>
}
})

呼び出されると、「今日のトピックは天気です!」と表示されます。

//end:​​ 私の知識の範囲

今、私は、次のコード スニペットを使用して、react-router のチュートリアルを行っています。

トピック.jsx:

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

ルート.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.jsxparamsに渡されるメカニズムは何ですか? propsコードのどこにも、「私の知識の範囲」に関する上記のセクションで表現されているイディオムはありません。<Topic params = {this.state.topics} />routes.jsx にも header.jsx にもありません。完全なリポジトリへのリンクはこちら. React-router のドキュメントには、params は「元の URL のパス名から解析されたもの」であると書かれています。これは私の心に響きませんでした。

4

1 に答える 1

59

中身についての質問react-routerです。

react-routerReact コンポーネント自体であり、propsすべてのルーティング情報を子コンポーネントに再帰的に渡すために使用します。ただし、これは の実装の詳細でreact-routerあり、混乱を招く可能性があることは理解しています。詳細については、以下をお読みください。

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

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

したがって、基本的に、React-Router はルーティング宣言 (メイン、トピック) の各コンポーネントを通過し、React.createElementメソッドを使用してコンポーネントが作成されるときに、次の props を各コンポーネントに「渡します」。各コンポーネントに渡されるすべての小道具は次のとおりです。

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上記で定義された props を使用して各要素 (メイン、トピックなど) を開始したためthis.props.paramsTopicコンポーネント自体にアクセスする方法が説明されていreact-routerます。

于 2015-10-02T06:49:02.393 に答える