我正在尝试制作动态导入请求的 Material-UI 图标的 React 组件,
页面加载时。我在这里提出的解决方案有效,但它发出警告
在编译时。此外,它会减慢项目的编译速度。
关于如何正确执行此操作的任何想法?
https://github.com/jurepetrovic/ordermanager_demo
主要逻辑在 App.js 中,第 5-10 行:
import React, { Component } from 'react';
import BarChartIcon from '@material-ui/icons/BarChart';
const MaterialIcon = ({ icon }) => {
console.log("icon: " + icon);
let resolved = require(`@material-ui/icons/${icon}`).default;
return React.createElement(resolved);
}
class App extends Component {
render() {
return (
<div>
<MaterialIcon icon={"PowerSettingsNew"} />
</div>
);
}
}
export default App;
它给出的警告是这样的:
Compile warning
最佳答案
我终于找到了解决这个问题的最简单的方法:
import
包中的所有 Material 图标:import * as Icons from '@material-ui/icons'
var iconNamesArray = ["FitnessCenter","LocalDrink","Straighten"]
<div className="my-icons-wrapper-css">
{
iconNamesArray.map((el,ind)=>{
let DynamicIcon = Icons[el]
return(
<DynamicIcon className="my-icon-css"/>
);
})
}
</div>
您的图标将出现在屏幕上。
关于reactjs - 在 React 中动态加载 Material-UI 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57981442/