React Router のハンドラー コンポーネントに Props を渡す
React Router を利用する React.js アプリケーションでは、特定のプロパティを渡すインスタンスがある場合があります。子コンポーネントへの追加が必要です。たとえば、次の構造について考えてみましょう。
<code class="javascript">var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); });</code>
目的は、プロパティを Comments コンポーネントに渡すことです。通常、これはコンポーネント宣言で直接実現できます。ただし、React Router では、別のアプローチが必要です。
1 つのオプションは、ラッパー コンポーネントを利用することです。これには、Comments コンポーネントをラップし、必要な props を渡す別のコンポーネントを作成することが含まれます。以下に例を示します:
<code class="javascript">var CommentsWithProps = React.createClass({ render: function () { return ( <Comments myprop={this.props.myprop} /> ); } }); // Then in the routes definition: var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={CommentsWithProps}/> <DefaultRoute handler={Dashboard}/> </Route> );</code>
ラッパー コンポーネントを使用しない別のアプローチは、Index コンポーネントを変更することです:
<code class="javascript">class Index extends React.Component { constructor(props) { super(props); } render() { return ( <h1> Index - {this.props.route.foo} </h1> ); } } var routes = ( <Route path="/" foo="bar" component={Index}/> );</code>
以上がReact Router のハンドラーコンポーネントに Props を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。