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

React Router のハンドラー コンポーネントに props を渡す

React Router では、props をハンドラー コンポーネントに渡すことが一般的な要件です。次の構造を考えてみましょう。

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);
});

Props を直接渡す

従来は、次のように props を Comments コンポーネントに直接渡します。

<Comments myprop="value" />

React Router 経由で props を渡す

ただし、React Router では、props は Route のコンポーネント prop を介して渡される必要があります。これを行うには 2 つの方法があります:

1.ラッパー コンポーネントの使用

ハンドラー コンポーネントをラップするラッパー コンポーネントを作成します:

var RoutedComments = React.createClass({
  render: function () {
    return <Comments {...this.props} myprop="value" />;
  }
});

次に、ルート内で Comments コンポーネントの代わりに RoutedComments コンポーネントを使用します:

<Route path="comments" handler={RoutedComments}/>

2.ルート プロパティでクラス コンポーネントを使用する

React.Component から拡張するクラス コンポーネントを定義し、コンポーネント prop:

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}/>
);

を使用します。

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