在定义另一个组件后，将节点组件名称放在括号中

Question

我正在尝试使用formik做出反应。我找到了这样的代码：

import React from 'react';
import * as Yup from 'yup';
import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';

// Shape of form values
interface FormValues {
  email: string;
  password: string;
}

interface OtherProps {
  message: string;
}

// Aside: You may see InjectedFormikProps<OtherProps, FormValues> instead of what comes below in older code.. InjectedFormikProps was artifact of when Formik only exported a HoC. It is also less flexible as it MUST wrap all props (it passes them through).
const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {
  const { touched, errors, isSubmitting, message } = props;
  return (
    <Form>
      <h1>{message}</h1>
      <Field type="email" name="email" />
      {touched.email && errors.email && <div>{errors.email}</div>}

      <Field type="password" name="password" />
      {touched.password && errors.password && <div>{errors.password}</div>}

      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>
    </Form>
  );
};

// The type of props MyForm receives
interface MyFormProps {
  initialEmail?: string;
  message: string; // if this passed all the way through you might do this or make a union type
}

function isValidEmail(email: string): boolean {
  const at = email.indexOf('@');
  const lastDot = email.lastIndexOf('.');
  const valid = at > 0 && lastDot > at + 1 && lastDot < email.length - 1;
  return valid;
}

// Wrap our form with the using withFormik HoC
const MyForm = withFormik<MyFormProps, FormValues>({
  // Transform outer props into form values
  mapPropsToValues: props => {
    return {
      email: props.initialEmail || '',
      password: '',
    };
  },

  // Add a custom validation function (this can be async too!)
  validate: (values: FormValues) => {
    let errors: FormikErrors<any> = {};
    if (!values.email) {
      errors.email = 'Required';
    } else if (!isValidEmail(values.email)) {
      errors.email = 'Invalid email address';
    }
    return errors;
  },

  handleSubmit: values => {
    // do submitting things
  },
})(InnerForm);

// Use <MyForm /> wherevs
export default class Commission extends React.PureComponent<undefined> {
  public render() {
    return (
      <div>
        <h1>My App</h1>
        <p>This can be anywhere in your application</p>
        <MyForm message="Sign up" />
      </div>
    );
  }
}

我注意到他在InnerForm的定义之后放了MyForm。在InnerForm的定义中，道具有像touched, errors, isSubmitting, message这样的元素，没有在任何地方定义。我想问一下这两个组件之间的关系如何以及它们之间如何传递道具。

Answer 1

withFormik似乎是一个高阶组件：https://reactjs.org/docs/higher-order-components.html

它是一个函数，它基本上采用现有的组件（在本例中为InnerForm）和可选的配置（具有mapPropsToValues和handleSubmit的对象）并生成一个新的组件（MyForm）。

这些通常用于向现有组件添加常用功能，其中可以包括为props提供默认值 - HOC通常需要他们装饰的组件具有可以注入的某些道具。