Javascript 将ES5混合转换为高阶组件

在我的项目中，我试图摆脱所有的混音，并用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
      );
    }
}

在mixin内部，它有一个

组件willmount

和一个

组件willupdate

，该组件运行一个

更新

功能，该功能将循环通过

数据

上的每个键并更新道具/状态

在React关于删除mixin的文章中，他们的mixin保存的是数据，而不是组件

在我的项目中，有许多组件都有一个

数据

对象，并使用这个mixin来更新它们的道具/状态。如何制作可重用组件来处理此数据对象

---

此外，我如何从组件内部访问此数据对象？在组件

中，此.data

为空。mixin

的内部。data

是组件内部的数据对象。。为什么？

您的高阶组件和mixin看起来非常相似。主要区别在于数据、道具和状态的共享/传递方式。在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)