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

问题描述

我正在使用 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,submitting } => (
    <TextInput name="email" label="Email Address" type="email" />
    <Button text="Login" disabled={!valid || pristine || submitting} />
  )
</Form>

我如何将道具 valid、pristine 和 submitting 传递给我的孩子，以便我可以将其用于例如禁用按钮？

解决方法

代替

{children}

试试这个，

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

react-final-form reactjs reactjs