Javascript 反应|如何向上传递一种成分

我试图传递

值

和

道具

，formik需要一个组件。我正在为一些表单使用各种小组件，并将它们传递到一个复杂的组件中，该组件需要在调用时将它们传递给每个单独的渲染

基本上所有的蚁脚。这里有一个这样的组件

import React, { Fragment } from 'react';
import debounce from 'debounce-promise';
import classNames from 'classnames';
import { Field, FormikProps, ErrorMessage } from 'formik';

import Asterisk from 'shared/common/components/element/Asterisk';
import { validateUsername } from '../../utils/index';

interface IValues {
  username?: string;
  email?: string;
}

export const InfoFields = (props: FormikProps<IValues>): JSX.Element => {
  const debounceUsernameValidation = (): void => {
    debounce(validateUsername, 500);
  };

  const { touched, errors } = props;

  return (
    <Fragment>
      <div className="pb-2">
        <label className="font-weight-bold" htmlFor="username">
          Username <Asterisk />
        </label>
        <Field
          validate={debounceUsernameValidation}
          className={classNames('form-control', {
            'is-invalid': errors.username && touched.username
          })}
          placeholder="Username (Required)"
          autoComplete="username"
          name="username"
          type="text"
        />
        <ErrorMessage name="username" component="div" className="text-danger" />
      </div>
      <div className="py-2">
        <label className="font-weight-bold">Email</label>
        <Field
          className={classNames('form-control', {
            'is-invalid': errors.email && touched.email
          })}
          autoComplete="email"
          placeholder="Email"
          name="email"
          type="email"
        />
        <ErrorMessage name="email" component="div" className="text-danger" />
      </div>
    </Fragment>
  );
};

export default InfoFields;

接口IProps{
doSubmit（服务：对象，值：对象）：LensesHttpResponse；
onSave（值：{username？：string；email？：string；password？：string；group？：string}）：无效；
通知（配置：对象）：无效；
模式：动作模式；
用户：IUser；
}
接口IValues扩展了FormikValue{
用户名？：字符串；
电子邮件？：字符串；
密码？：字符串；
组？：字符串；
}

我需要一种方法将道具

用户名、电子邮件
和其他信息传递给每个组件。问题是该组件被称为2个向下渲染，因此无法访问它们

我在这里有点不知所措。有人能帮我吗？谢谢
 您实际上并没有将道具传递给
InfoFields
，尽管您编写该组件是为了接受
FormikProps
。你可以这样传递福米克的道具：

<Formik
    render={formikProps => (
        <Form>
            // Other Code.

            <InfoFields {...formikProps} />

            // Other Code.
        </Form>
    )}
/>

使用field render道具，您可以访问嵌套在更下方的组件中的表单值，而无需到处传递道具

Uncaught TypeError: Cannot read property 'username' of undefined. It refers to this line of code:
errors.username && touched.username and this
errors.email && touched.email

interface IProps {
  doSubmit(service: object, values: object): LensesHttpResponse<string>;
  onSave(values: { username?: string; email?: string; password?: string; group?: string }): void;
  notify(config: object): void;
  mode: ActionMode;
  user: IUser;
}

interface IValues extends FormikValues {
  username?: string;
  email?: string;
  password?: string;
  group?: string;
}

<Formik
    render={formikProps => (
        <Form>
            // Other Code.

            <InfoFields {...formikProps} />

            // Other Code.
        </Form>
    )}
/>

<Field
    name="username"
    validate={debounceUsernameValidation}
>
    {({ field, form }: FieldProps) => (
        <Fragment>
            <input
                {...field}
                className={classNames('form-control', {
                    'is-invalid': form.errors[field.name] &&
                        form.touched[field.name]
                })}
                placeholder="Username (Required)"
                type="text"
            />
            <ErrorMessage 
                name={field.name} 
                component="div" 
                className="text-danger" 
            />
        </Fragment>
    )}
</Field>