React：Higher Orderコンポーネント：子供の状態を教えてください

Question

私は最新のReactにアップグレードできるように、mixinsからHOCへリファクタリングしようとしています（現在はReact 13/ES5を使用しています）。コンポーネントがロードされると、ミックスインはルート付きのqueryプロパティを持つデータオブジェクトthis.dataにアクセスできます。

React.createClass({ 
    mixins: [myMixin], 
    data: { 
    query: "/api/foo" 
    }, 
    componentDidUpdate(): function(){ 
    } 
    ... 
} 

はミックスイン内部componentDidMountで、それは、そのルートを照会データを取り戻すと、状態の上に置きます。

var myMixin = React.createClass({ 
    componentDidMount(): function(){ 
    this.fetchData(this.data.query) 
    } 
    fetchData(query) { 
    // fetch the data 
    } 
    ... 
} 

これは、私のコンポーネントから多くの定型文を抽出します。すべてのコンポーネントにcomponentDidMountを実行する必要はありません。ちょうどdataオブジェクトがあります。

私はこのミックスインをプロジェクト全体に散らばっています。これは実際にはこれよりもはるかに多くなりますが、私は単にそれを黙らせようとしています。

InはHOCです。私はdataからすべてのものを取り出し、getInitialStateに入れました。今、ラップされたコンポーネントの状態にdataがあります。どうすればアクセスできますか？私のmixinのように、自分のHOCが私のcomponentDidMountを処理し、data.queryにアクセスしてデータを取得します。私はcomponentDidMountを持つすべてのコンポーネントを書き直す必要はありません。

PS- 私はmixinがなぜthis.dataを行うことができるのか誰かが教えてくれるのであれば、私は通常ReactとES6の最新バージョンを使用しています。 Reactの最新バージョンでは、render()のようなオブジェクトをそのように定義することはできません。

Answer 1

リアクトは、stateをコンポーネントの外側から変更することを推奨しません。 stateはコンポーネントによって所有されているため、コンポーネントだけがそのコンポーネントを制御します。 React documentationから

：

状態は小道具に似ていますが、それはプライベートと完全に コンポーネントによって制御されます。

それでは、あなたにできることはpropsの代わりstateを使用しています。与えられた例では、次のようにHigher Order Componentを書くことができます。しかし、子コンポーネントは、stateの代わりにpropsからデータをレンダリングするように変更する必要があります。

function HOC(WrappedComponent){ 

    return React.createClass({ 

    getInitialState: function() { 
     return { data: null }; 
    }, 

    componentDidMount: function(){ 
     this.fetchData(WrappedComponent.prototype.data.query) 
    }, 

    fetchData: function(query){ 
    // Fetching data first 
    // Then set the state with data 
    this.setState({data:data}); 
    }, 

    render: function() { 
     var props = Object.assign({}, this.props, this.state); 
     return React.createElement(WrappedComponent, props); 
    } 

    }); 

} 

var HOCChild = HOC(Child); 

ミックスインはthis.dataを行うと、非常に参考になる私のコンポーネントができません なかった理由、誰もが 私に言うことができる場合、私は通常、反応しES6の最新バージョンを使用しPS-。 Reactの最新バージョンでは、 のようにrender（）の外にオブジェクトを定義することはできません。

通常、反応成分はES6クラスとして定義されます。 ES6クラスは静的またはインスタンスのプロパティをサポートしていません。しかし、このように請負業者内部のインスタンスプロパティを定義することができます。

class A{ 
    constructor(){ 
    this.foo = "foo" 
    } 
}