使用HOC作为React组件

Question

我有一个名为withData的HOC。

我将其用作withData(Component)。

并且还需要将HOC中的html代码包装在路径中的渲染器中：

<Route path={`/${ROUTES.HOME}`}
       render={() => (
                      <withData>
                         <Layout className="big-head" addImg>
                            <Home />
                         </Layout>
                       </withData>
                      )} />

根据HOC的约定，其名称应为驼峰式（withData）。 但是，要使用HOC作为组件，名称应为帕斯卡大小写（WithData）。 使用骆驼保护套警告：

Warning: <withUserData /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

如何在不更改HOC名称的情况下避免此错误？

尝试：

• const WithUserData = withUserData;
• const WithUserData =;

遇到错误。

Answer 1

组件名称应位于CAPS中：WithUserData。

如果使用小写字母，它将被视为HTML标签，例如<p>, <h1>。

尝试使用名称为WithUserData的组件，它将起作用。