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

Posted 2023-03-28

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

【英文标题】：show reactjs icons dynamically icon names picking from JSON file

【发布时间】：2021-04-09 21:36:55

【问题描述】：

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

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

但它首先显示编译错误。请问有什么方法可以实现这个

【参考方案1】：

你可以使用 react html parser 或 html-react-parser 来显示图标

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>;
  

html-react-parser

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

【参考方案2】：

您正在导入图标对象。你可以先从基于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>
    )

【讨论】：

我尝试采用这种方法，但最终出现以下错误Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of Card.

那是因为你没有传递 props.icon 或者你传递了一个无效的名字

其实我导出了，像这样CardData.map(( id, icon, intro , index) => ( <div key=title + index> <Card id=id icon=icon intro=intro /> </div> ) )

它的工作，我搞砸了订单，谢谢:)