返回組件數組的 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

使用鈎子返回 JSX 不是一種常見的模式。 對於您所描述的更直接且更符合行業標准的實現，只需將其創建為一個組件即可。

我將 switch 邏輯外推到它自己的組件，以防需要在應用程序的其他地方重用它。 這樣也更容易閱讀和測試行為。

import React from "react";
import { Image, Paragraph, Header } from "../../components/Blocks";

function BlockImage({item}) {
  switch (item.name) {
    case "image":
      return <Image data={item.data} />;
    case "paragraph":
      return <Paragraph data={item.data} />;
    case "heading":
      return <Header data={item.data} />;
    default:
      return null;
  }
}

export const Blocks = ({blocks}) => {
  return (
    <>
      {blocks.map((item: Item) => <BlockImage key={item.order} item={item} />}
    </>
  );
}

Answer 2

通過實現這個鈎子，我可以看出你正在應用工廠模式

檢查此 URL 以獲取更多詳細信息： https : //refactoring.guru/design-patterns/factory-method

當基於給定的輸入在運行時加載動態組件/類時，它很有用。 此外，如果創建組件的成本有點高，並且您想統一您的解決方案，那么這也是不錯的選擇。