|
阅读：3370回复：0
React中实现import导入动态的对象
背景：在做React权限管理时，使用antd框架，左边菜单的icon需要导入，使用时，像标签一样引用，代码如下：
import {
AppstoreOutlined,
BarChartOutlined
} from '@ant-design/icons';使用时<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>问题：现在，要根据后台的数据，来动态生成左边的菜单，那icon也要动态生成，如何做到呢？即import{}括号里导入什么对象应该是动态的，一开始不知道。 解决方案： 开始想复杂了，其实很简单。首先就要从import的用法说起，请看下面示例： import {a} from 'XXX'
//导入XXX文件中的a组件
import * as a from 'XXX'
//导入XXX文件中的所有组件，并将其命名为a，调用具体组件的方式为a.b、a.c。。。了解了{}导入对象，与星号导入，问题就一下解决了。 1.使用*号导入所有组件，并为其取一个名称 2.在使用名称.组件名 注：组件名不能写变量，所以我们可以用[]代替，中括号就可以使用变量了 具体实现代码如下： import * as antIcons from '@ant-design/icons'; let IconMenu =antIcons[item.menuImgClass];
return <Menu.Item key={item.menuId} icon={ <IconMenu />}>
<Link to={item.menuUrl}>{item.menuName}</Link>
</Menu.Item>注：1.变量IconMenu,这里的变量名首字母必须大写， 2.不能直接将变量的值，写入icon.必须将值赋给变量，然后，icon里写变量 return <Menu.Item key={item.menuId} icon={ <antIcons[item.menuImgClass]/>}>
<Link to={item.menuUrl}>{item.menuName}</Link>
</Menu.Item>上面，将变量，直接写在icon的方法，是错误的 哈哈，分享完了，欢迎交流讨论 |
|
|
公众号
