Question

我正在创建一个组件MyComponent，它是来自流行的表单管理器库Formik的组件包装。包装器希望传递完全相同的道具，因为包装器所做的只是添加一些样式和布局。

因此，我尝试并定义MyComponent来采用与Formik组件相同的道具。

Formik类的键入方式为

export declare class Formik<Values = FormikValues> extends React.Component<FormikConfig<Values>, FormikState<Values>> {

供参考，FormikConfig如下所示：

export interface FormikSharedConfig {
    validateOnChange?: boolean;
    validateOnBlur?: boolean;
    isInitialValid?: boolean | ((props: object) => boolean | undefined);
    enableReinitialize?: boolean;
}
export interface FormikConfig<Values> extends FormikSharedConfig {
    component?: React.ComponentType<FormikProps<Values>> | React.ReactNode;
    render?: ((props: FormikProps<Values>) => React.ReactNode);
    children?: ((props: FormikProps<Values>) => React.ReactNode) | React.ReactNode;
    initialValues: Values;
    onReset?: (values: Values, formikActions: FormikActions<Values>) => void;
    onSubmit: (values: Values, formikActions: FormikActions<Values>) => void;
    validationSchema?: any | (() => any);
    validate?: ((values: Values) => void | object | Promise<FormikErrors<Values>>);
}

因此，我尝试使用以下方式创建组件

class AdvancedSearch extends Component<FormikConfig<any>> {
  render() {
    return (
      <Formik {...this.props}>
        {formikProps => (
          <>
            <Form>
              <Container>
                <div>
                  {this.props.children && this.props.children(formikProps)}
                </div>
                <div>text</div>
              </Container>
            </Form>
          </>
        )}
      </Formik>
    );
  }
}

但是，我收到关于this.props.children没有兼容的呼叫签名的错误：

无法调用类型缺少调用签名的表达式。输入'string |编号真实| {} | ReactElement ReactElement组件）>）| （新（属性：任意）=>组件）> | ... 47更多... | （ReactPortal＆（（props：FormikProps <...>）=> ReactNode））'没有兼容的呼叫签名。

如何正确防范这种情况？

正确键入一个与其子容器具有相同道具的包装纸

0 个答案: