从 JSON 文件中动态显示 reactjs 图标图标名称

Question

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

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

我在可重复使用的卡片组件中使用 React-Bootstrap-Icons，如下所示

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;

这就是我循环 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;

但我想把它提升到一个新的水平，即动态显示图标，从 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;

但它首先显示的是编译错误。我可以知道有什么方法可以实现这个吗

Answer 1

您可以使用 react html 解析器或 html-react-parser，用于显示图标

反应-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>;
  }

html-反应解析器

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

Answer 2

您正在导入一个图标对象。你可以先从基于 props.icon 的图标解构你的图标，然后调用它：

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>
    )
}

从 JSON 文件中动态显示 reactjs 图标图标名称

show reactjs icons dynamically icon names picking from JSON file

reactjs

font-awesome

react-bootstrap

card

react-icons