React自定义钩子，返回组件数组

Question

这是一个坏的模式使用自定义钩子吗?

我传入一个数组，然后循环来确定将显示哪些组件。

import React from "react";
import { Image, Paragraph, Header } from "../../components/Blocks";
export const useBlocks = (blocks) => {
const items = blocks.map((item: Item) => {
switch (item.name) {
case "image":
return <Image key={item.order} data={item.data} />;
case "paragraph":
return <Paragraph key={item.order} data={item.data} />;
case "heading":
return <Header key={item.order} data={item.data} />;
default:
return null;
}
});
return items;
};

Answer 1

我不知道是否该称其为"坏"，但这种情况并不常见。你没有使用任何内置钩子，所以我不知道为什么你想让它像钩子一样。

通常情况下，您只需要将这样的内容构建为实际组件:

import React from "react";
import { Image, Paragraph, Header } from "../../components/Blocks";
export const Blocks = ({blocks}) => {
return (
<>
{blocks.map((item: Item) => {
switch (item.name) {
case "image":
return <Image key={item.order} data={item.data} />;
case "paragraph":
return <Paragraph key={item.order} data={item.data} />;
case "heading":
return <Header key={item.order} data={item.data} />;
default:
return null;
}
})}
</>
);
}

Answer 2

通过实现这个钩子，我可以看出你正在应用工厂模式

查看此URL以获取更多详细信息:https://refactoring.guru/design-patterns/factory-method

在基于给定输入在运行时加载动态组件/类时非常有用。此外，如果创建组件的成本有点高，并且您希望统一您的解决方案，那么它将是一个不错的选择。