Question

我有一个卡片组件，我想通过道具将图标名称传递给它。

图标来自反应图标库。

要正常显示，您将执行以下操作：

import { MdCardGiftcard } from "react-icons/md";

<MdCardGiftcard />

但是我希望该组件基于发送给它的道具。这可能吗？

const AdminCard = ({icon}) => {
// prop 'icon' with value 'MdCardGiftcard' sent to this component
  {icon}
}

这是道具产生的东西

      <AdminCard
        title="Some title"
        endpoint="someEndpoint"
        color="blue"
        icon="MdCardGiftcard"
      />

Answer 1

尝试：

和管理卡组件上的

      const AdminCard = ({prop}) => {
     
          `<${prop.icon}/>`
      }

Answer 2

您可以这样做：

import { MdCardGiftcard } from "react-icons/md";

<AdminCard
    title="Some title"
    endpoint="someEndpoint"
    color="blue"
    icon=MdCardGiftcard
  />

const AdminCard = ({icon}) => {
    const Icon = icon; // The capitalization is important here 
    return <Icon/>;
}

有关大写字母here

的更多信息

如何传递道具并根据道具名称调用组件

2 个答案: