返回组件数组的 React 自定义 Hook答案

【问题标题】：React Custom Hook that returns array of Components返回组件数组的 React 自定义 Hook
【发布时间】：2021-12-13 22:23:31
【问题描述】：

这是与自定义钩子一起使用的错误模式吗？

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

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;
};

【问题讨论】：

对我来说似乎并不坏

标签： reactjs react-hooks next.js

【解决方案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;
        }
      })}
    </>
  );
}

【讨论】：

我完全赞成对我的答案提出修改建议，但重写整个内容似乎有点……过分了，不是吗？

【解决方案2】：

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

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

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

【讨论】：