Question

我想有一个组件，它从父组件获取属性并根据此属性发出AJAX请求。父组件可以更改此属性，我的子组件必须获得另一个AJAX请求。

这是我的代码，但我不确定它是否是最佳的，甚至是正确的：

<News source={this.state.currentSource} />

组件：

var News = React.createClass({

   propTypes: {
     source: React.PropTypes.string
   },

   getInitialState: function() {
     return {
       entities: []
     };
   },

   componentWillReceiveProps(nextProps) {
     var url = 'http://localhost:3000/api/sources/' + nextProps.source + '/news';
     this.serverRequest = $.get(url, function(result) {
       this.setState({
         entities: result
       });
     }.bind(this));
   },

   componentWillUnmount: function() {
     this.serverRequest.abort();
   },

   render: function() {

      // ...    
   }});

module.exports = News;

componentWillReceiveProps是否适合此代码？

Answer 1

componentWillReceiveProps会正常工作，我会做的另一件事是，如果<News/>从父组件获取其道具，那么要遵循的一个好模式是让父组件实际处理api调用并传递下来结果作为道具。这样，您的新闻组件实际上只需处理基于其道具与渲染和管理状态的渲染内容。

我只能看到您的应用程序的有限部分，因此可能不适合您的用例，但这里有一篇关于在智能和愚蠢组件之间进行区分的好文章。

http://jaketrent.com/post/smart-dumb-components-react/

更改属性时发出AJAX请求

1 个答案: