如何传递prop并基于prop名称调用组件

Question

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

这些图标来自react图标库。

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

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的更多信息