在另一个组件定义之后的括号中放置一个节点组件名称

Question

我正在尝试在 React 中使用 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 通常要求它们装饰的组件具有可以注入的某些 props。

在另一个组件定义之后的括号中放置一个节点组件名称

Put a node component name in the parenthesis after the definition of another component

javascript

forms

typescript

reactjs

formik