javascript - 如何从路由器访问组件方法

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函数，然后您可以将其作为 Prop 传递到CompTable。

然后，当触发handleClick时，您可以在顶级组件中设置State，这样您就可以自由地传递所需的id以在API调用中使用它。