reactjs中如何将字符串转换为组件？ [复制]答案

【问题标题】：How to convert string to component in reactjs? [duplicate]reactjs中如何将字符串转换为组件？ [复制]
【发布时间】：2021-04-23 18:37:06
【问题描述】：

我有一个这样的图标名称数组：

const iconArray = [
  {
    link: "/",
    iconName: "MdHome",
    iconSize: 28,
    notiNumber: 5,
  },
  {
    link: "/account",
    iconName: "MdAccountCircle",
    iconSize: 28,
    notiNumber: 5,
  },
  {
    link: "/menu",
    iconName: "MdReorder",
    iconSize: 28,
    notiNumber: 5,
  },
]

我想将 iconName 转换为这样的组件名称 <MdHome size="28" />, <MdAccountCircle size="28" />, <MdReorder size="28" />

这是我的代码：

iconArray.map(icon => {
  return <{icon.iconName} size={icon.iconSize} />
})

运行时会报错

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

react中创建组件有两种方式，一种是函数式组件

export function iconName(props) {

return(
  <div>
   <MdHome size="props.size" />

  </div>
)
}

和类组件如

import React, {Component}
export class IconName extend React.Component{
  constructor(props) {
     super(props);
   }

   render() {
     return(

       <div>
          <MdHome size="props.size" />
       </div>
     )
  }
}

然后按如下方式导入组件

import {IconName} from 'myComponentfile'

return (
  <IconName size="28" />
)

【讨论】：

【解决方案2】：

让你的 iconArray 像这样：

const iconArray = [
  {
    link: "/",
    icon: <MdHome size="28" />,
    notiNumber: 5,
  },
  {
    link: "/account",
    icon: <MdAccountCircle size="28" />,
    notiNumber: 5,
  },
  {
    link: "/menu",
    icon: <MdReorder size="28" />,
    notiNumber: 5,
  },
]

并像这样使用它们：

iconArray.map(icon => icon.icon)

【讨论】：