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
      );
    }
}

在mixin内部，它有componentWillMount和componentWillUpdate运行update函数，它将循环遍历data上的每个键并更新道具/状态。

在React的docs中关于删除mixins，他们的mixins保存数据，而不是组件。

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

另外，我如何从组件中访问此数据对象？在组件this.data中为null。 mixin this.data的内部是组件内部的数据对象..为什么？

Answer 1

您的高阶组件和mixin看起来非常相似。主要区别在于如何共享/传递data，道具和状态。在mixin的情况下，您正在使用mixin的行为来改变组件的定义，因此state和props都在一个结果组件中。

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

因此，根据您的示例中的内容，您的高阶组件将类似于

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转换为高阶组件

1 个答案: