小编Bar*_*art的帖子

我正在尝试制作一个Formik 包装器，它将children作为道具并渲染任何放入其中的东西。有几种形式可以使用不同的初始值和验证模式等。唯一的共同点是网格布局。目标是在子组件中访问Formik道具，如值、错误等，我不知道如何将它传递给它的子组件。表单字段甚至不显示。

包装器：

import React from 'react';
import { Formik, FormikConfig, FormikValues } from "formik";
import { Col, Layout, Row } from "antd";

const FormContainer: React.FC<FormikConfig<FormikValues>> = ({ children, ...props }) => {
    return <Formik
        {...props}
    >
        {props => (
            <Layout>
                <Row style={{ height: "100vh", display: "flex", alignItems: "center" }}>
                    <Col span={12}>
                        <Layout>
                            {/*this will be replaced with some background image*/}
                            <pre>{JSON.stringify(props.values, null, 2)}</pre>
                            <pre>{JSON.stringify(props.errors, null, 2)}</pre> …