使用 HOC 作為 React 組件

Question

我有一個名為withData的 HOC。

我將它用作withData(Component) 。

並且還需要在路由中的render中將html代碼包裹在HOC中：

<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 中的名稱的情況下避免此錯誤？

試過：

• 常量 WithUserData = withUserData;
• 常量 WithUserData =;

有錯誤。

Answer 1

組件名稱應使用大寫字母：WithUserData。

如果您使用小型大寫字母，則會將其視為 HTML 標簽，例如<p>, <h1> 。

嘗試使用組件名稱為 WithUserData，它將起作用。