これまでのところ、パラメーターを介してあるコンポーネントから別のコンポーネントにプロパティがどのように渡されるかについての私の知識の範囲は次のとおりです。
//start: 私の知識の範囲
topic
A.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 のパス名から解析されたもの」であると書かれています。これは私の心に響きませんでした。