Преобразование микшинов 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 и componentWillUpdate это работает update функция, которая будет проходить через каждую клавишу data и обновить реквизит / состояние.

В документах React об удалении миксинов их миксины содержат данные, а не компонент.

В моем проекте МНОГИЕ компоненты, которые имеют data возражать и использовать этот миксин для обновления своего реквизита / состояния. Как сделать повторно используемый компонент для обработки этого объекта данных?

Кроме того, как я могу получить доступ к этому объекту данных из компонента? В компоненте this.data нулевой. Внутри миксин this.data находится объект данных внутри компонента.. почему?

Answer 1

Ваш компонент высшего порядка и миксин будут выглядеть очень похоже. Основное отличие будет в том, как data, реквизиты и состояние являются общими / переданы. В случае с миксином вы изменяете определение своего компонента в соответствии с поведением миксина, поэтому состояние и реквизиты находятся в одном результирующем компоненте.

В случае компонента более высокого порядка вы создаете новый компонент, который оборачивается вокруг вашего другого компонента. Таким образом, общее состояние / поведение полностью содержится в компоненте переноса, и любые данные, которые необходимо использовать в компоненте переноса, могут передаваться через реквизиты.

Итак, из того, что у вас есть в вашем примере, ваш компонент более высокого порядка будет что-то вроде

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)