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

Question

我有以下 json 文件，我保留了 Id、Intro、Icon 名称

[
    {
        "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

您正在导入一个图标对象。你可以先从基于 props.icon 的图标中解构你的 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>
    )
}