Реагируйте: как правильно набрать компонент HOC? - PullRequest
Новая
       18

Реагируйте: как правильно набрать компонент HOC?

2 голосов
/ 13 мая 2019

Я искал предложения, но не смог найти ответа. Я в основном думаю, что могу правильно напечатать HOC следующим образом:

Это мой компонент на данный момент: 

// @flow
import React, { Component } from 'react';
import moment from 'moment';
import type { ApolloClient } from 'apollo-client';

import { convertDatesToISO } from 'components/Calendar/utils';


type Props = {
  client: ApolloClient<any>,
  location: {
    search: string,
  },
};

type SelectedDates = {
  startOn: moment,
  endOn: moment,
};



const withInitialSelectedDates = (WrappedComponent: Component<Props>): Component => {
  return class extends Component<Props> {
    initialSelectedDates: ?SelectedDates;

    initialSelectedDatesFromQueryString(): ?SelectedDates {
      const searchString = this.props.location.search;
      const searchParams = new URLSearchParams(searchString);
      const startOn = moment.utc(searchParams.get('start_date'));
      const endOn = moment.utc(searchParams.get('end_date'));

      if (!startOn.isValid() || !endOn.isValid()) return null;
      if (startOn < moment.utc().startOf('day')) return null;
      if (endOn < startOn) return null;

      return { startOn, endOn };
    }

    setInitialSelectedDatesOnGraphQLClient(): void {
      if (this.initialSelectedDates == null) return;

      this.props.client.writeData({
        data: {
          selectedDates: convertDatesToISO([this.initialSelectedDates]),
        },
      });
    }

    componentDidMount(): void {
      this.initialSelectedDates = this.initialSelectedDatesFromQueryString();
      this.setInitialSelectedDatesOnGraphQLClient();
    }

    render(): React.Element {
      return (
        <WrappedComponent
          initialSelectedDates={this.initialSelectedDates}
          {...this.props}
        />
      );
    }
  };
};

export default withInitialSelectedDates;

Я думаю, что могу изменить: 

const withInitialSelectedDates = (WrappedComponent: Component<Props>): Component => {

к этому: 

const withInitialSelectedDates = <PassedProps: {} & Props>(WrappedComponent: ComponentType<PassedProps>): ComponentType<PassedProps> => {

Для этого потребуется импортировать ComponentType. У меня вопрос, где я должен изменить свой текущий код и добавить PassedProps?

1 Ответ

0 голосов
/ 16 мая 2019

Вы хотите последовать примеру из раздела «Внедрение реквизита» документации HOC Flow. Пример реализации может выглядеть так: 

import * as React from 'react';

// Since Try Flow doesn't have access to these types
type ApolloClient<T> = any;
type moment = any;

type Props = {
  client: ApolloClient<any>,
  location: { 
    search: string,
  },
};

type SelectedDates = {
  startOn: moment,
  endOn: moment,
};

function withInitialSelectedDates(
  Component: React.AbstractComponent<Props>
): React.AbstractComponent<$Diff<Props, { initialSelectedDates: SelectedDates | void }>> {
  return class WrappedComponent extends React.Component<
    $Diff<Props, { initialSelectedDates: SelectedDates | void }>,
    { initialSelectedDates: SelectedDates | null }
  > {
    state = {
      initialSelectedDates: null,
    }

    getInitialSelectedDatesFromQueryString(): SelectedDates | null {
      if (true) {
        return { startOn: 'start', endOn: 'end' };
      } else {
        return null;
      }
      // use actual implementation; I just needed to satisfy type check
    }

    setInitialSelectedDatesOnGraphQLClient(selectedDates: SelectedDates | null): void {
      // implementation
    }

    componentDidMount(): void {
      const initialSelectedDates = this.getInitialSelectedDatesFromQueryString();
      this.setState({ initialSelectedDates });
      this.setInitialSelectedDatesOnGraphQLClient(initialSelectedDates);
    }

    render() {
      return (
        <Component
          {...this.props}
          initialSelectedDates={this.state.initialSelectedDates}
        />
      );
    }
  }
}

Try Flow

...