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

【问题标题】：how to pass a prop and call a component based on the prop name如何传递道具并根据道具名称调用组件
【发布时间】：2020-06-22 13:36:27
【问题描述】：

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

图标来自 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"
      />

【问题讨论】：

您可以将<MdCardGiftcard /> 作为道具传递给AdminCard
啊！不知道我能做到这一点:)

标签： reactjs react-props

【解决方案1】：

试试这个：

在管理卡组件上

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

【讨论】：

【解决方案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的信息

【讨论】：

感谢您的回答。它似乎没有显示图标。迈克尔的回答似乎是实现我想要的最简单的方法。