Reactjs 动态显示从JSON文件中拾取的图标名称

我有以下json文件，我保留了Id、简介和图标名

[
    {
        "id" : 7,
        "intro": "intro_7",
        "icon" : "ArrowRight"
       
    },
    {
        "id" : 8,
        "intro": "intro_8",
        "icon" : "Alarm"
    }
]

我在我的可重用卡组件中使用，如下所示

import "./bootstrap.min.css";
import * as Icon from './react-bootstrap-icons';

const Card = props =>{
    return(
     <div className="card text-center">
         <div className="card-body text-dark">
         
           <Icon.Alarm></Icon.Alarm>
            <h4 className="card-title">
                {props.intro}
            </h4>
         </div>
     </div>
    )
}

export default Card;

导入“/bootstrap.min.css”； 从“/react bootstrap icons”导入*作为图标； 康斯特卡=道具=>{ 返回( {props.intro} ) } 导出默认卡； 这就是我循环json文件和显示卡片的方式

import Card from './card';
import CardData from './data.json';

class Cards extends Component {
    render() { 
      return ( 
      <div className="container-fluid d-flex justify-content-center">
          <div className="row">
              {
                CardData.map(({ id, icon, intro }, index) => (
                  <div key={title + index}>
                    <Card 
                    id={id} 
                    icon={icon} 
                    intro={intro} 
                   />
                  </div>
                  )
                )
              }
          </div>
      </div> 
      );
    }
  }
 
export default Cards;

从“/Card”导入卡片；
从“./data.json”导入CardData；
类卡扩展组件{
render（）{
报税表（
{
map（{id，icon，intro}，index）=>(
)
)
}
);
}
}
导出默认卡；

但我想把它带到下一个层次，动态显示图标，从json文件中获取，目前，它是静态的

所以我试着这样说

import React from 'react';
import "./bootstrap.min.css";
import * as Icon from './react-bootstrap-icons';   


const Card = props =>{
    return(
     <div className="card text-center">
         <div className="card-body text-dark">
         
           <Icon.+{props.icon}></Icon.+{props.icon}>
            <h4 className="card-title">
                {props.intro}
            </h4>
         </div>
     </div>
    )
}

export default Card;

从“React”导入React；
导入“/bootstrap.min.css”；
从“/react bootstrap icons”导入*作为图标；
康斯特卡=道具=>{
返回(
{props.intro}
)
}
导出默认卡；

---

但它首先显示了编译错误。我想知道有什么方法可以实现这一点吗？您可以使用react html解析器或html react解析器作为显示图标

反应html解析器

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 
class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }

从“React”导入React；
从“react html parser”导入react HtmlParser、{processNodes，convertNodeToElement，htmlparser2}；
类HtmlComponent扩展了React.Component{
render（）{
常量html='示例html字符串'；
返回{ReactHtmlParser（html）}；
}

html反应分析器

import parse from 'html-react-parser';
<ul>
  {parse(`
    <li>Item 1</li>
    <li>Item 2</li>
  `)}
</ul>

import parse from'html react parser'；

{解析(`
项目1
项目2
`)}

您正在导入一个图标对象。您可以首先根据

道具从图标中解构图标。图标

，然后调用它：

import * as Icons from 'react-bootstrap-icons';

const Card = props =>{
  const { [props.icon]: Icon } = Icons
    return(
     <div className="card text-center">
         <div className="card-body text-dark">
         
           <Icon></Icon>
            <h4 className="card-title">
                {props.intro}
            </h4>
         </div>
     </div>
    )
}

import*作为“反应引导图标”中的图标；
康斯特卡=道具=>{
常量{[props.icon]：icon}=图标
返回(
{props.intro}
)
}

我尝试使用这种方法，但最终出现以下错误

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但是得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。请检查

Card

的渲染方法，这是因为您没有传递props.icon或传递的名称无效。实际上，我已将其导出，如下所示

CardData.map(({id，icon，intro}，index）=>（））

它在工作，我把顺序搞乱了，谢谢：）