我正在尝试制作在页面加载时动态导入请求的 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;
Run Code Online (Sandbox Code Playgroud)
它给出的警告是这样的: