问题描述
我有以下 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;
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;
解决方法
您正在导入一个图标对象。你可以先从基于 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>
)
}
,
你可以使用 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>