javascript - Formik JavaScript 语法

Question

我很难理解在使用 Formik 时通常使用的一些语法。我想很多人在开始使用react和formik时都会遇到这样的问题。请看一下这段代码:

export default Formik({
  mapPropsToValues: (props) => ({ 
    email: props.user.email,
    username: props.user.username,
    imaginaryThingId: props.user.imaginaryThingId,
  }),

  validationSchema: Yup.object().shape({
    email: Yup.string().email('Invalid email address').required('Email is required!'),
    username: Yup.string().required('This man needs a username'),
  }),

  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      // submit them do the server. do whatever you like!
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
})(UserForm);

问题 #1:导出默认 Formik({}) 有何作用？它是一个函数定义吗？

问题#2:validationSchema:Yup.object()这是什么？在对象定义之外使用冒号!？

问题#3:首先执行代码的哪一部分？

Answer 1

我建议您先花一些时间来熟悉 JavaScript，因为这些问题实际上并不是 React 或 Fromik 特有的。本质上，withFormik(options) 返回一个函数，该函数将 React 组件作为输入，并返回一个在内部管理表单状态的增强组件。以下内容基本上就是您上面的内容，其编写方式应该可以回答您的问题。

const UserForm = /* base form component */
const mapPropsToValues = /* props mapper */
const validationSchema = /* validation schema */
const handleSubmit = /* submit handler */
const formikOptions = { mapPropsToValues, validationSchema, handleSubmit }
const EnhancedUserForm = withFormik(formikOptions)(UserForm)

export default EnhancedUserForm