javascript - 在定义另一个组件后的括号中放一个节点组件名称
问题描述
我正在尝试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
未在任何地方定义的元素。我想问一下这两个组件之间的关系以及它们之间的 props 是如何传递的。
解决方案
withFormik
似乎是一个高阶组件:https ://reactjs.org/docs/higher-order-components.html
它是一个函数,它本质上采用现有组件(在这种情况下InnerForm
)和可选的配置(带有mapPropsToValues
and的对象handleSubmit
)并产生一个新的组件 ( MyForm
)。
这些通常用于向现有组件添加通用功能,其中可以包括为 props 提供默认值——HOC 通常要求他们装饰的组件具有可以注入的某些 props。
推荐阅读
- php - 为什么我收到以下错误“第 1 行的列‘模型’的数据被截断”
- google-apps-script - 为什么在我的 for 循环中尝试减少 i 时会出现语法错误“Unexpected Identifier”?
- haskell - 使用类型同义词定义实例
- json - 在 vb.net 中获取满足特定条件的 JObject 的所有键
- kubernetes - 如何使用 kubernetes go-client 进行模拟工作
- c++ - 根据条件通过复制或使用引用进行 C++ 初始化
- c++ - 如何在 C++ 中访问受保护的运算符成员
- angular - 处理重定向 uri 到不存在的路由
- c# - EF Core,一对多关系,多个表和单个外部表
- javascript - 为什么我的下拉列表从谷歌表更新 webapp 中的第二个依赖下拉列表这么慢