Преобразование миксинов 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
      );
    }
}

Внутри миксина есть componentWillMount и componentWillUpdate, которые запускают функцию update, которая будет перебирать каждую клавишу на data и обновлять свойства/состояние.

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

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

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


reactjs javascript higher-order-components mixins ecmascript-5
person user2465134    schedule 01.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш компонент более высокого порядка и миксин будут выглядеть очень похоже. Основное различие будет заключаться в том, как 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)
person TLadd    schedule 03.04.2017