ReactJSコンポーネントに更新された小道具を自動的に渡すには

Question

私のReactJSコンポーネントは以下のようにjQueryのアタッチポイントにマウントされているシナリオがあります。

以下のコードでCustomfieldsDrawerは反応コンポーネントであり、propsは私がpropsとして渡すオブジェクトです。 $（ '＃app'）は私のReactコンポーネントがマウントされるアタッチポイントです。

ReactDOM.render(React.createElement(CustomfieldsDrawer, props), $('#app')); 

今小道具がactaually一部の顧客イベントにAJAX呼び出しにより更新されるオブジェクトです、私が直面しています問題は、小道具が変更を取得し、それが自動的にいないときリアクトコンポーネントがわからないです自分自身をrerenders。私は小道具が実際に変化しているときには、コード行の上を再度呼び出さなければなりませんでした。あなたは私のReactコンポーネントの自動更新を容易にする方法を知っていますか？

componentWillReceiveProps(nextProps) { 
    this.setState({ 
     //set you new state here, then in the render method, you should render using this state, instead of props 
     someState: nextProps.yourNewProp, 
    }); 
    } 

    render() { 
    // Use "{this.state.someState}" instead of "{this.props.yourProp}" 
    return (
     <div>{this.state.someState}</div> 
    ); 
    } 

これが「doesnの場合：

Answer 1

propsはReactの外で修正されたプレーンなjavascriptオブジェクトです、反応しない明示的に指示しない限り、この場合はコンポーネントを再レンダリングすることによって、変更されたことが分かりません。

ですから、どちらかをコンポーネントに反応し、それから、AJAXを呼び出すいくつかの親にコードをラップし、それを子コンポーネントに渡さになるだろう、それは再レンダリングする自動トリガーする新しいデータを格納する状態です変更することができます。

の場合、React以外のコードを使用すると主張する場合は、手動で再レンダリングする必要があります。しかし、インスピレーションのために、公式のReactのサイトのReactDOM.render and the Top Level React APIブログ記事をチェックするために、これのための便利な管理コードをいくつか作成することができます。

また、メモには、投稿したコードがどのように動作する可能性があるかわかりません。 ReactDOM.render関数は2番目のパラメータがDOMオブジェクトであると予測しますが、$('#app')はjQueryオブジェクトを返します。あなたは代わりに$('#app')[0]を持っていることを意味しましたか？

Answer 2

はそれのためのときに我々setStateコンポーネントが自分自身を更新しますので、AJAXコールバックで、私たちはここにSETSTATEことができ、または私はあなたがあなたのCustomfieldsDrawerコンポーネントにcomponentWillReceiveProps()を使用するかもしれないと思うどちらかリアクトあなたのケースについてもっと理解できるように、ここに投稿してください。