Блог

Я хотел бы иметь компонент, который получает свойство от родительского компонента и выполняет 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 это место для этого кода?

componentWillReceiveProps будет работать просто отлично, одна вещь, которую я бы сделал по-другому, — это если <News/> получает свои реквизиты от родительского компонента, тогда хорошим примером для подражания является то, чтобы родительский компонент фактически обрабатывал вызовы api и передавал результаты в качестве реквизита. Таким образом, ваш новостной компонент действительно должен иметь дело только с отображением контента на основе его реквизитов, а не с отображением и управлением состоянием.

Я вижу только ограниченную часть вашего приложения, так что это может не соответствовать вашему варианту использования, но вот отличная статья о том, как сделать этот тип дифференциации между интеллектуальными и немыми компонентами.

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