在 ReactJS 中为表单组件创建 ContextProvider

Posted 2023-04-14

【中文标题】在 ReactJS 中为表单组件创建 ContextProvider

【英文标题】：Creating a ContextProvider for a Form Component in ReactJS

【发布时间】：2020-01-14 14:04:16

【问题描述】：

我为我创建的表单组件创建了一些上下文。现在，我已经在我的应用程序的根目录中为该上下文创建了一个提供程序。但我想知道这是否是最好的做事方式。

有许多页面上没有表单。为什么我要在这些页面上提供不需要的代码？还是真的没什么大不了的？

如果最好不要这样做，那么关于如何仅在那些使用表单组件的页面上添加提供程序的任何想法？

【问题讨论】：

你应该看看formik

【参考方案1】：

您可以做的是使用该 Provider 创建一个 HOC，并仅在您想要的组件中使用它。

const withForm = Component =>     
    return (
        <Provider>
            <Component />
        <Provider>        
    )


// other file 
export const MyComponentWithForm = withForm(MyComponent) 

这个例子非常简单，但它只是为了让你了解它应该如何工作（这个 HOC 中有很多缺失的部分）。

另外请注意，您也可以为Consumer 执行此操作如果您使用的是类组件。