在 React 中将道具传递给孩子

Question

我正在尝试制作一个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>
                        </Layout>
                    </Col>
                    <Col span={12}>
                        <Layout>
                            {/*here goes goes a Form from a different components*/}
                            {children}
                        </Layout>
                    </Col>
                </Row>
            </Layout>
        )}
    </Formik>
};

export default FormContainer;

我一定做错了什么。当我环绕任何东西时，我无法从其他任何地方获得任何 Formik 道具/值FormContainer。

我的表单示例（到目前为止）：

import React from "react";
import { Field, Form } from "formik";
import { Col, Form as AntForm, Icon, Input, Row } from "antd";
import { initialValues, validationSchema } from "./fieldValidation";
import FormContainer from "../../../containers/FormContainer/FormContainer";

const RegisterPage: React.FC = () => {
    return (
        <FormContainer
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={(data, { setSubmitting }) => {
                setSubmitting(true);

                setTimeout(() => {
                    alert(JSON.stringify(data, null, 2));
                    setSubmitting(false);
                }, 5000);
            }}
        >
            {({touched, errors}) => (
                <Form>
                    <Row gutter={[8, 8]}>
                        <Col span={12}>
                            <AntForm.Item
                                help={touched.firstName && errors.firstName ? errors.firstName : ""}
                                validateStatus={touched.firstName && errors.firstName ? "error" : undefined}
                            >
                                <Field
                                    name="firstName"
                                    prefix={<Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} />}
                                    placeholder="First name"
                                    as={Input}
                                />
                            </AntForm.Item>
                        </Col>
                        <Col span={12}>
                            <AntForm.Item
                                help={touched.lastName && errors.lastName ? errors.lastName : ""}
                                validateStatus={touched.lastName && errors.lastName ? "error" : undefined}
                            >
                                <Field
                                    name="lastName"
                                    prefix={<Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} />}
                                    placeholder="Last name"
                                    as={Input}
                                />
                            </AntForm.Item>
                        </Col>
                    </Row>
                </Form>
            )}
        </FormContainer>
    );
};

export default RegisterPage;

我被困住了。我在这里做错了什么？

Answer 1

以下是如何将道具“propsToPass”从父级传递给他的所有直系子级：

const Parent = props => {
  const { children } = props;

  const childrenWithExtraProp = React.Children.map(children, child =>
    React.cloneElement(child, { propsToPass: "toChildren" })
  );

  return <div>{childrenWithExtraProp}</div>;
};

export default Parent;

所以在这种情况下，两个孩子都会有道具“propsToPass”

<Parent>
  {/* this.props.propsToPass will be available in this component */}
  <Child></Child>
  {/* this.props.propsToPass will be available in this component */}
  <AnotherChild></AnotherChild>
</Parent>

你可以对你的表格做同样的事情。