如何将渲染道具传递给 React 功能组件中的子级？

Question

我正在使用react-final-form我有一个类似这样的Form组件：

export function Form = ({ children, onSubmit, initialValues, ...props }) => {
   return (
      <FinalForm 
         initialValues={initialValues} 
         onSubmit={onSubmit}
         render={({ handleSubmit, submitting, pristine, valid }) => (
            <form onSubmit={handleSubmit} className="space-y-6" {...props}>
             {children}
            </form>
         )}
      />
   )
}
export default Form;

我想像这样使用这个表单组件：

<Form>
  ({ valid, pristine, submitting } => (
    <TextInput name="email" label="Email Address" type="email" />
    <Button text="Login" disabled={!valid || pristine || submitting} />
  )
</Form>

我怎样才能将valid 、 pristine的submitting传递给我的孩子，以便我可以使用它来禁用按钮？

Answer 1

代替

{children}

尝试这个，

{
    React.Children.map(children, child => {
        if (React.isValidElement(child)) {
            return React.cloneElement(child, { submitting, pristine, valid });
        }
        return child;
    });
}