将ES5 Mixins转换为高阶组件

问题描述：

在我的项目中，我试图摆脱所有mixin并将其替换为HOC。目前我使用ES5卡住了。将ES5 Mixins转换为高阶组件

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和运行一个update功能将通过在data每个键循环和更新道具/状态componentWillUpdate。

在React的docs有关去除mixin，它们的mixin保存数据，而不是组件。

我的项目中有很多组件有一个data对象，并使用这个mixin来更新他们的道具/状态。如何制作一个可重用组件来处理这个数据对象？

另外，我怎样才能从组件内访问这个数据对象？组件this.data为空。 mixin this.data的内部是组件内部的数据对象。为什么？

答

您的高阶组件和mixin看起来非常相似。主要区别在于如何共享/传递data，道具和状态。在mixin的情况下，你正在用mixin的行为改变你的组件的定义，所以状态和道具都在最终的组件中。

在更高顺序的组件情况下，您正在创建一个新的组件来环绕其他组件。因此，共享状态/行为完全包含在包装组件中，并且需要在包装组件中使用的任何数据都可以通过道具传递。

所以从你在你的例子是什么，你的高阶组件会像

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)

将ES5 Mixins转换为高阶组件

相关推荐