2

在我的项目中，我试图摆脱所有的 mixin 并用 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 内部，它有 acomponentWillMount和 acomponentWillUpdate运行一个update函数，该函数将遍历每个键data并更新 props/state。

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

我的项目中有很多组件都有一个data对象并使用这个 mixin 来更新它们的 props/state。如何制作一个可重用的组件来处理这个数据对象？

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

4

1 回答 1

1

您的高阶组件和 mixin 看起来非常相似。主要区别在于如何data共享/传递 、 props 和 state 。在 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)
于 2017-04-03T05:00:45.703 回答