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

Posted 2023-02-22

【中文标题】返回组件数组的 React 自定义 Hook

【英文标题】：React Custom Hook that returns array of Components

【发布时间】：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;
;

【问题讨论】：

对我来说似乎并不坏

【参考方案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

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