ホームページ > ウェブフロントエンド > jsチュートリアル > React Router のハンドラーコンポーネントに Props を渡すにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-10-24 03:11:02
オリジナル
440 人が閲覧しました

How to Pass Props to Handler Component in React Router?

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 サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート