基於數組的 React 組件映射

Question

我根據傳遞的 ID 動態創建一個元素：

const Icon: FC<IconPropsI> = ({iconId, ...rest}) => {
  const iconsMap: IconsMapT = {
    IconUser: IconUser,
    IconTime: IconTime,
    IconVideo: IconVideo
  }

  return createElement(iconsMap[iconId], rest)
}

每個地圖屬性的值都有相應的功能組件。

我想避免重復自己。 我已經創建了一個 ID 列表。 使用以下數組...

export const IconsIds: IconsIdsT = [ 'IconUser', 'IconTime', 'IconVideo', 'manymore...']

...如何在Icon組件內動態創建地圖，這樣我就不必寫 3 次 200 多個不同的圖標 ID？

Answer 1

在iconsMap您還可以使用屬性速記來避免重復。

所以代替const iconsMap = { IconUser: IconUser }你應該能夠做類似const iconsMap = { IconUser, ...otherIcons }

請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions

或者，有一個babel插件可以將某個文件夾中的所有導出組合到一個對象中，然后您可以從該對象中獲取值。

檢查這個答案

但是請注意潛在的問題 - 如果您將傳遞錯誤的iconId ，或者您的iconId希望所有導入都是靜態定義的（AFAIK - 至少react-native和expo期望） - 您可能會遇到這種方法的問題，並且手動地圖輸入可能是更具彈性的解決方案。