Question

我最近开始研究reactjs，我目前正在尝试ajax请求并将属性从父级传递给子级。我有一个反应组件Competitions执行ajax请求：

var Competitions = React.createClass({
 getInitialState: function() {
  return {
    compData: [],
  }
 },

 componentDidMount: function() {
  axios.get(this.props.source, {
    headers: {'X-Auth-Token': '*******************',
              'Content-type': 'application/json'}
  })
  .then(result => {
    this.setState({compData: result.data});
  })
  .catch(error => {
    console.log(error);
  });
 },

 render: function() {
  return (
    <CompTable compData={this.state.compData} />

  );
 }
});

module.exports = Competitions;

Competitions组件将结果数据传递给CompTable

var CompTable = React.createClass({

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

 handleClick: function(e) {
  var url = 'http://api.football-data.org/v1/competitions/x/teams';
  var source = url.replace(url.split('/')[5], e);
  console.log(source);
 },

 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)} >{comp.caption}</td>
    </tr>
   );
  }, this);
  return (
   <tbody>{list}</tbody>
  )
 }
});

module.exports = CompTable;

这是Teams组件

var Teams = React.createClass({
 getInitialState: function() {
  return {
   teamData: [],
  }
 },

 componentDidMount: function() {
  axios.get(this.props.source, {
   headers: {'X-Auth-Token': '*******************',
            'Content-type': 'application/json'}
   })
   .then(result => {
    this.setState({teamData: result.teams.data});
   })
   .catch(error => {
    console.log(error);
   });
  },

  render: function() {
   return (
    <TeamsTable teamData={this.state.teamData} />,
   );
  }

 });


 module.exports = Teams;

我尝试做的是使用handleClick函数单击compData.id组件的CompTable属性，并将其用作名为另一个组件的source属性Teams（与Competitions组件相同），它使用给定属性作为源URL来执行新的ajax请求。有没有办法做到这一点？谢谢

Answer 1

我想我找到了解决问题的方法。因此，Competitions是家长，CompTable和Teams是孩子。我不知道是否有更简单的方法，但这个似乎有效。它不完美，我还有其他问题需要解决，但是我设法在子组件中使用我在父组件内的第一个ajax调用进行第二次ajax调用，方法是抓取compData.id属性并将其传递给子节点，点击。欢迎提出任何意见。

Competitions组件

var Competitions = React.createClass({
 getInitialState: function() {
  return {
   compData: [],
   id: "",
  }
},

 componentDidMount: function() {
  axios.get(this.props.source, {
   headers: {'X-Auth-Token': '********************',
              'Content-type': 'application/json'}
  })
  .then(result => {
   this.setState({compData: result.data});
  })
  .catch(error => {
   console.log(error);
  });
 },

 changeId: function (newId) {
  this.setState({
   id: newId
  });
 },

 render: function() {
  return (
   <CompTable compData={this.state.compData} id={this.state.id} onClick= {this.changeId} />
  );
 }
});

module.exports = Competitions;

CompTable组件

var CompTable = React.createClass({

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

 getInitialState: function() {
  return {
   showTeams: false,
   hide: false,
  };
 },

 teamsClick: function() {
  this.setState({
   showTeams: true,
   hide: true,
  });
 },

 handleClick: function(e) {
  this.props.onClick(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={function() { this.teamsClick(); this.handleClick(comp.id); }.bind(this)}> {comp.caption} </td>
     <td>{comp.league}</td>
     <td>{comp.numberOfTeams}</td>
    </tr>
   );
  }, this);
  return (
   <div > { this.state.showTeams ? <Teams id={this.props.id}/> : null } </div>
   <tbody>{list}</tbody>
  )
 }
});

module.exports = CompTable;

Teams组件

var Teams = React.createClass({

 getInitialState: function() {
  return {
   teamData: [],
  }
 },

 componentDidMount: function() {
  var url = 'http://api.football-data.org/v1/competitions/x/teams';
  var source = url.replace(url.split('/')[5], this.props.id);

  axios.get(source, {
   headers: {'X-Auth-Token': '********************',
            'Content-type': 'application/json'}
  })
  .then(result => {
   this.setState({teamData: result.data.teams});
  })
  .catch(error => {
   console.log(error);
  });
 },

 render: function() {
  return (
   <TeamsTable teamData={this.state.teamData}/>
  );
 }

});

module.exports = Teams;

如何将属性从组件传递到另一个组件以在ReactJS中执行ajax请求？

1 个答案: