React Router を使用してハンドラー コンポーネントにプロパティを渡す

React Router を利用する React.js アプリケーションでは、特定のハンドラー コンポーネントにプロパティを渡す必要があるシナリオが発生する場合があります。 。次のアプリケーション構造を考えてみましょう。

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        

            
Some header
            
        
    );
  }
});

var routes = (
  
    
    
  
);

ReactRouter.run(routes, function (Handler) {
  React.render(, document.body);
});

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

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

// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return ;
  }
});

var routes = (
  
    
    
  
);

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

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        Index - {this.props.route.foo}
      
    );
  }
}

var routes = (
  
);

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