Reactjs 这是高阶组件的正确示例吗？

我最近浏览了高阶组件的文档，对实现有点困惑。我想创建一个加载器组件，它封装逻辑并仅显示数据是否已加载，否则显示加载屏幕。这是正确的实施方式吗？有人能提出改进建议吗

WithLoader.js（HOC文件）

export const with loader=（道具）=>{
if（props.showLoader==true）
{
返回(
加载。。。
);
}
其他的
{
返回道具。儿童；
}
}

index.js

//pass true/false in showLoader prop if data is received
<WithLoader showLoader={true}>
           //Assume that SummaryComponent displays a list of items
           <SummaryComponent cartItems={cartItems} />
        </WithLoader>

//如果收到数据，则在showLoader prop中传递true/false
//假设SummaryComponent显示项目列表

根据的定义，高阶组件（HOC）是接受组件并返回新组件的函数

因此，withLoader函数应该获取一个组件，然后返回一个包含要实现的逻辑的组件

const withLoader = component => {
   let C = component;
   return function Component({ showLoader, ...rest }) {
   if (showLoader === true) {
      return <h1>Loading...</h1>;
   } else {
      return <C {...rest} />;
}};};

最后，使用它

<WithLoader showLoader={true} />;

；

---

在

中查看它的演示，你可以去阅读一些基本的高阶组件

如果一个答案只提供了指向第三方网站的链接，而没有将内容总结为一个好的答案，我不会将其定性为一个答案。您是否愿意总结一下，或者至少澄清一下为什么链接源是一个更好的替代方案？

const WithLoader = withLoader(SummaryComponent);

<WithLoader showLoader={true} />;