反應動態圖標使用

Question

我有一個對象列表，對於它們，我已經分別導入了反應圖標作為列表名稱的別名，但是當在圖標位置作為列表名稱提供時，圖標不會呈現

例如： import { BiSearchAlt2,BiCurrentLocation,BiBlanket as Blanket, BiCctv as Cctv,} from "react-icons/bi";

const defaultExtras = [Cctv, BiCctv ]

{defaultExtras.map((Eachextra) => (
        <div key={Eachextra} className="createBusBodyEachStopContainer">
          <Chip
            color="info"
            onDelete={() => handleRemoveExtras(Eachextra)}
            label={Eachextra}
            deleteIcon={<IoClose />}
            icon={Eachextra}
          />
        </div>
      ))}

所以在圖標道具“Eachextra”中是導入的圖標別名，但是當我提供 Cctv 或 BiCctv 圖標正在呈現

Answer 1

首先是 defaultExtras 字符串數組，例如 const defaultExtras = ["Cctv", "BiCctv"];

其次，Chip 組件對圖標屬性、字符串或 React 元素的期望是什么？

考慮使用 typescript 它將有助於解決不同預期類型的此類問題。