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

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