プロパティが変更されたときにAJAX要求を作成します

Question

親コンポーネントからプロパティを取得し、このプロパティに基づいてAJAXリクエストを行うコンポーネントが必要です。親コンポーネントはこのプロパティを変更でき、子コンポーネントは別の1つの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/