reactjs - 在 ReactJS 中为表单组件创建 ContextProvider

Question

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

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

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

标签： reactjsreact-componentreact-context

Answer 1

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

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

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

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

另请注意，Consumer 如果您使用类组件，您也可以这样做。