Форма формы

Этот компонент кажется относительно уникальным, и используется каждый пример на официальном сайте.Form.create()Этот метод HOC используется для создания соответствующего компонента формы. Таким образом, для компонентов формы мы должны в основном говорить о функции более высокого порядка create.

Form.create

Это функция более высокого порядка, которая передает компонент реакции и возвращает новый компонент реакции.Внутри функции входящий компонент будет преобразован, и будут добавлены определенные методы для выполнения некоторых секретных операций. Если вы хотите углубиться в компоненты более высокого порядка, пожалуйста, переместитездесь, здесь мы не будем вдаваться в подробности. Далее мы смотрим непосредственно на код этой функции

  static create = function<TOwnProps>(options: FormCreateOption<TOwnProps> = {}): ComponentDecorator<TOwnProps> {
    const formWrapper = createDOMForm({
      fieldNameProp: 'id',
      ...options,
      fieldMetaProp: FIELD_META_PROP,
    });

    /* eslint-disable react/prefer-es6-class */
    return (Component) => formWrapper(createReactClass({
      propTypes: {
        form: PropTypes.object.isRequired,
      },
      childContextTypes: {
        form: PropTypes.object.isRequired,
      },
      getChildContext() {
        return {
          form: this.props.form,
        };
      },
      componentWillMount() {
        this.__getFieldProps = this.props.form.getFieldProps;
      },
      deprecatedGetFieldProps(name, option) {
        warning(
          false,
          '`getFieldProps` is not recommended, please use `getFieldDecorator` instead, ' +
          'see: https://u.ant.design/get-field-decorator',
        );
        return this.__getFieldProps(name, option);
      },
      render() {
        this.props.form.getFieldProps = this.deprecatedGetFieldProps;

        const withRef: any = {};
        if (options.withRef) {
          withRef.ref = 'formWrappedComponent';
        } else if (this.props.wrappedComponentRef) {
          withRef.ref = this.props.wrappedComponentRef;
        }
        return <Component {...this.props} {...withRef} />;
      },
    }));
  };

Из кода видно, что эта функция возвращает функцию, которая принимает компонент в качестве параметра, но не очень понятно, что она возвращает, поэтому нужно искать еще разcreateDOMFormчто создано

createDOMFormдаrc-formОсновной код для создания компонента формы, указанный в библиотеке, находится в коде послойного поиска.createBaseForm.jsв этом файле

function createBaseForm(option = {}, mixins = []) {
  const { ... } = option;

  return function decorate(WrappedComponent) {
    const Form = createReactClass({ ... });

    return argumentContainer(Form, WrappedComponent);
  };
}

Это еще одна функция более высокого порядка, в которой сначала создается компонент Form, а затем с помощьюargumentContainerФункция обёрнута в исходящий, исходящий — это новый компонент

Этот новый компонент будет иметь все свойства входящего компонента и компонента более высокого порядка.

import hoistStatics from 'hoist-non-react-statics';

export function argumentContainer(Container, WrappedComponent) {
  /* eslint no-param-reassign:0 */
  Container.displayName = `Form(${getDisplayName(WrappedComponent)})`;
  Container.WrappedComponent = WrappedComponent;
  return hoistStatics(Container, WrappedComponent);
}

argumentContainerфункция использует библиотекуhoist-non-react-staticsЭта библиотека представляет собой задачу решения статических методов решения компонентов высокого порядка, которые не могут использовать входящие компоненты.

В частности, на официальном онлайн-лице также реагируют с соответствующимобъяснятьС помощью этого метода статический метод, передаваемый в сборке компонентов, может быть полностью скопирован в возвращаемые функции более высокого порядка.

Теперь он появляется из предыдущего кодаformWrapperЭто компонент, который принимает входящие компоненты, а затем преобразует компонент в компонент Form более высокого порядка с собственным добавлением antd.

Суммировать

С помощью этого функционального модуля я углубил свое понимание использования и HOC, а также более глубокое понимание декоратора, +1 очко навыков.