React将字符串转化成组件，将Antd图标字符串转化为图标组件

最新推荐文章于 2024-05-10 18:43:40 发布

朝朝忆萍

最新推荐文章于 2024-05-10 18:43:40 发布

阅读量1.3k

点赞数

分类专栏： React单页面应用文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/jddfj/article/details/129211811

版权

React单页面应用专栏收录该内容

7 篇文章 3 订阅

订阅专栏

文章讲述了React.createElement函数用于创建元素节点的过程，并展示了如何通过它来条件渲染组件。此外，文中还介绍了如何将Antd图标的字符串名称转换为图标组件，以及如何处理导航菜单，将菜单项的icon字符串转换为图标组件，实现动态渲染。

摘要由CSDN通过智能技术生成

React.createElement的作用是创建新的元素节点，也可以将字符串转换成元素节点

创建元素节点：

//***********两种方案完全等价
//方案一
{React.createElement(
    collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, 
    //会将下面对象中的属性写到元素的属性中
    {className: 'trigger'}
)}

//方案二
<div>
    {collapsed? 
        <MenuUnfoldOutlined className="trigger" }></MenuUnfoldOutlined> 
        :<MenuFoldOutlined className="trigger" }></MenuFoldOutlined>
    }
</div>

将Antd图标字符串转化为图标组件

在不确定图标的情况下，只能将所有图标都引入

//引入所有图标
import * as Icons from '@ant-design/icons';

const Iconfont = (props) => {
    //这里传入的props是一个对象，里面有icon属性，值是antd图标的名字
    const { icon } = props
    return React.createElement(Icons[icon])
}

export default Iconfont

将导航菜单中的icon转换成图标组件

// 处理菜单的图标
const handleMenuData = (list) => {
    // 深拷贝防止污染原数据
    let items = JSON.parse(JSON.stringify(list))
    return items.map(item => {
        //调用封装好的icon字符串转成组件的方法
        item.icon = item.icon && <Iconfont icon={item.icon}></Iconfont>
        //如果导航菜单中有子菜单需要用到递归的方式
        item.children = item.children && handleMenuData(item.children)
        return item
    })
}
//最后得到的就是icon这一项的字符串转成了图标组件
handleMenuData(MenuList)