ES5ミックスインを高次のコンポーネントに変換する

Question

私のプロジェクトでは、すべてのミックスインを取り除き、それらをHOCに置き換えようとしています。私は現時点でES5を使用して立ち往生しています。

export default React.createClass({ 
    mixins: [SomeAsyncMixin], 
    data: { 
    item1: { 
     params: ({params, query}) => { 
     params: ({params, query}) => { 
      if (!query.p) { 
       return null; 
      } 
      const status = someTernaryResult 
      return { 
       groups: query.groups, 
       status, 
       subject: params.subject, 
      }; 
     }, 
     promise: query => query && query.subject && api(makeUrl(`/some/endpoint`, query)) 
     }, 

    item2: { 
     params: ({params, query}) => { 
      //same as before 
     }, 
     promise: ({subject, query}) => 
      // same as before 
    } 

    render() { 
     // some stuff 

     return(
     // some jsx 
    ); 
    } 
} 

は、ミックスインの内側には、componentWillMountとdata上の各キーをループや小道具/状態を更新するupdate機能を実行componentWillUpdateを有しています。

ミックスインを取り除くことについてのリアクションのdocsでは、ミックスインはコンポーネントではなくデータを保持します。

私のプロジェクトにはdataオブジェクトを持つ多くのコンポーネントがあり、このmixinを使用してその小道具/状態を更新します。このデータオブジェクトを処理するために再利用可能なコンポーネントを作成するにはどうすればよいですか？

また、コンポーネント内からこのデータオブジェクトにアクセスするにはどうすればよいですか？コンポーネントthis.dataにはnullがあります。ミックスインの中でthis.dataは、コンポーネント内部のデータオブジェクトです。なぜですか？

Answer 1

あなたの上位コンポーネントとmixinは非常によく似ています。主な違いは、data、小道具、および州がどのように共有/渡されるかです。 mixinの場合、mixinの振る舞いを使ってコンポーネントの定義を変更しているので、stateとpropsはすべて結果のコンポーネントの1つになります。

上位コンポーネントの場合、他のコンポーネントを囲む新しいコンポーネントを作成しています。したがって、共有された状態/振る舞いは、ラッピングコンポーネント内に完全に含まれ、ラップされたコンポーネント内で使用する必要があるデータは、すべて小道具を介して渡すことができます。

だから、あなたはあなたの例では持っているものから、自分の高次の成分は

const someAsync = (data) => (WrappedComponent) => { 
    class SomeAsyncComponent extends React.Component { 
     constructor(...args) { 
      super(...args) 

      this.state = { 
       ... 
      } 
     } 

     componentWillMount() { 
      // Make use of data, props, state, etc 
      ... 
     } 

     componentWillUpdate() { 
      ... 
     } 

     render() { 
      // May filter out some props/state, depending on what is needed 
      // Can also pass data through if the WrappedComponent needs it. 
      return (
       <WrappedComponent 
        { ...this.props } 
        { ...this.state } 
       /> 
      ) 
     } 
    } 

    return SomeAsyncComponent 
} 

ような何かそしてそれ

export default someAsync(dataConfig)(WrappedComponent) 

のご利用状況になります