【问题标题】: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"
      />

【问题讨论】:

  • 您可以将&lt;MdCardGiftcard /&gt; 作为道具传递给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的信息

    【讨论】:

    • 感谢您的回答。它似乎没有显示图标。迈克尔的回答似乎是实现我想要的最简单的方法。
    猜你喜欢
    • 2020-03-22
    • 1970-01-01
    • 2020-11-17
    • 1970-01-01
    • 2017-07-02
    • 2018-08-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多