使用React Router 將Props 傳遞給處理程序元件

在利用React Router 的React.js 應用程式中，您可能會遇到需要將props 傳遞給特定處理程序組件的場景。考慮以下應用程式結構：

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

要將屬性傳遞給 Comments 元件，通常使用 等語法。然而，這種方法與 React Router 不相容，React Router 期望處理程序元件是純函數或類別元件。

一個解決方案是建立一個包裝器元件，封裝處理程序元件和傳入的 props：

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

var routes = (
  
    
    
  
);

或者，您可以利用類別元件和 this.props.route 物件來存取傳遞給父路由的 props：

class Index extends React.Component { 

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

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

var routes = (
  
);

透過在 / 路由上設定 foo 屬性，您可以稍後在 Index 元件中使用 this.props.route.