反应动态图标使用

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 它将有助于解决不同预期类型的此类问题。