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

React Router を使用してハンドラー コンポーネントに props を渡す

React Router を利用する React.js アプリケーションでは、特定のハンドラー コンポーネントに props を渡す必要があるシナリオが発生する場合があります。 。次のアプリケーション構造を考慮してください。

<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 コンポーネントに props を渡すには、通常、 のような構文を使用します。ただし、このアプローチは、ハンドラー コンポーネントが純粋な関数またはクラス コンポーネントであることを期待する React Router とは互換性がありません。

1 つの解決策は、ハンドラー コンポーネントと渡された props の両方をカプセル化するラッパー コンポーネントを作成することです。

<code class="javascript">// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return <Comments {...this.props} />;
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentWrapper} myprop="value"/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

または、クラス コンポーネントと this.props.route オブジェクトを利用して、親ルートに渡されるプロパティにアクセスすることもできます。

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

/ ルートに foo プロパティを設定することにより、 、後から this.props.route.

を使用して Index コンポーネント内でプロパティにアクセスできます。

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