React Router でハンドルされたコンポーネントに Props を渡すにはどうすればよいですか?

React Router でハンドルされるコンポーネントに props を渡す

React Router を使用する React.js アプリケーションでは、ハンドルされるコンポーネントに props を渡す必要があることがよくあります。これを実現するには、考慮すべきアプローチがいくつかあります。

1 つの簡単なアプローチは、必要な props を取得し、必要に応じてそれらを渡す新しいコンポーネントでハンドルされたコンポーネントをラップすることです。

<code class="javascript">var CommentsWrapper = React.createClass({
  render: function () {
    return <Comments myprop="value" />;
  }
});</code>

このようにして、CommentsWrapper を目的のルートのハンドラーとして使用できます:

<code class="javascript">var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

ただし、このアプローチは、処理される複数のコンポーネントに props を渡す必要がある場合に扱いにくくなる可能性があります。このような場合、より柔軟なアプローチは、ルート設定でコンポーネント プロパティを使用することです。これにより、処理されるコンポーネントに props を直接渡すことができます。

<code class="javascript">var routes = (
  <Route path="/" component={Index}/>
);

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <RouteHandler myprop="value" />
      </div>
    );
  }
});</code>

このアプローチでは、props を直接次のコンポーネントに渡すことができます。ラッパーを必要としないコメントコンポーネント:

<code class="javascript"><Route path="comments" component={Comments}/></code>

以上がReact Router でハンドルされたコンポーネントに Props を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。