如何從路由器訪問組件方法

Question

我正在執行 Ajax 請求，並以表格的形式在組件中顯示數據。 我從同一個組件中獲取單擊數據（ handleClick函數獲取id數據），以便將其用於另一個組件內的另一個 Ajax 請求。 我從 React-Router 調用所有組件。 問題是我需要單擊的信息將其用作我在執行路由的組件內執行的調用的屬性。 有沒有辦法從那里訪問它？

CompTable組件提供了一個數據表。

var CompTable = React.createClass({

 propTypes: {
  compData:   React.PropTypes.array.isRequired
 },

 getInitialState: function() {
  return {id: ''};
 },

 handleClick: function(e) {
  this.setState({id:e})
 },

 render: function() {

  var list = this.props.compData.map(function (comp, i) {
   return (
    <tr key={i+1}>
     <th scope="row">{i+1}</th>
      <td className={comp.id} onClick={this.handleClick.bind(this, comp.id)}> <Link to={'/competitions/'+comp.league}> {comp.caption} </Link></td>
      <td>{comp.league}</td>
      <td>{comp.numberOfTeams}</td>
     </tr>
    );
   }, this);

這是路由組件：

var app = document.getElementById('app');

var TeamsWrapper = React.createClass({
 render: function () {
  return (
   <div>
    <Teams id={CompTable.handleClick} />
   </div>
  );
 }
});

var CompetitionsWrapper = React.createClass({
 render: function () {
  return (
   <div>
    <Competitions source="http://api.football-data.org/v1/competitions/?season=2016" />
   </div>
  );
 }
});

ReactDOM.render(
 <Router history={browserHistory}>
  <Route path='/' component={Layout}>
   <IndexRoute component={Home}></IndexRoute>
   <Route path='/competitions' component={CompetitionsWrapper}></Route>
   <Route path='/competitions/:teamLeague' component={TeamsWrapper} ></Route>
  </Route>
 </Router>, app);

<Teams id={CompTable.handleClick} />不起作用。 任何幫助將不勝感激。 謝謝！

Answer 1

要實現這一點，您必須將狀態移動到組件，從而解決路由。 （你現在沒有這樣的頂級組件，所以你必須創建一個）在同一個組件中，你必須定義你的 handleClick 函數，然后你可以將它作為道具傳遞給 CompTable。

然后，當 handleClick 被觸發時，您在頂級組件中設置狀態，因此您可以自由傳遞所需的id以在您的 API 調用中使用它。