免费做调查问卷的网站,做外汇消息面的网站,星斗科技 网站建设,新沂网站制作最近在一项目里#xff08;React antd#xff09;遇到一个需求#xff0c;某项基础信息里有个图标配置#xff08;图标用的是antd的Icon组件#xff09;#xff0c;该项基础信息的图标信息修改后#xff0c;存于后台数据库#xff0c;后台数据库里存的是antd Icon组件…最近在一项目里React antd遇到一个需求某项基础信息里有个图标配置图标用的是antd的Icon组件该项基础信息的图标信息修改后存于后台数据库后台数据库里存的是antd Icon组件的图标Tag名称如AreaChartOutlined 、PieChartOutlined 、BarChartOutlined 等另外在展示页面需要根据该项信息的Tag名称显示对应的antd图标。
antd 图标的使用方法
正常情况下安装ant-design/icons依赖后就可以在页面中使用antd图标如
$ npm install ant-design/icons --saveimport { HomeOutlined } from ant-design/icons;const App: React.FC () (SpaceHomeOutlined //Space
);但是如果页面中图标的Tag名称不确定又如何使用呢
方案1. 使用React.createElement创建元素
关于React.createElement的详细用法可以阅读文档https://react.dev/reference/react/createElement React.createElement(type, props, ...children) 包含三个参数
type: 该参数必须为一个有效的React组件类型例如其可以是一个Tag名称如div或者span也可以是一个React组件一个函数、一个类或者一个特殊组件如Fragmentprops: 该参数应是一个对象或者null。如果传递null则会当成空对象处理。React会创建一个元素该元素属性与参数props相匹配。optional …children: 可选参数children。可以传递0个、1个或多个。其可以是ReactNode包含React组件字符串数字ReactNode空节点null, undefined, true, false或者ReactNode数组。
知道React.createElement用法之后我们可以进行简单的尝试代码如下
import React from react;
import ./index.css;
import * as Icons from ant-design/icons; // 注意要先引入icons
import { Space } from antd;function customIcon(tagName: string) {return React.createElement(Icons[tagName], {}, null);
}const App: React.FC () (Space{customIcon(AreaChartOutlined)}{customIcon(PieChartOutlined)}{customIcon(BarChartOutlined)}/Space
);export default App;完整代码可以在codesandbox里查看https://codesandbox.io/p/sandbox/react-createelement-chuang-jian-dong-tai-yuan-su-3hndf2?file%2Fdemo.tsx%3A1%2C1 在codesandbox里我们可以看到效果和我们预想的一样正常显示了三个图标
方案2. 使用自定义Tag Name
但是对于上述方法个人感觉有一点点的繁琐。 在一番搜索之下看到React官方文档里有这么一句话链接https://legacy.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string ‘div’ or ‘span’ passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file. 大意是说Tag名称如果以小写开头则会指向内置的html组件例如div 或者 span结果将会通过React.createElement创建对应元素其中type参数为div或者span如 React.createElement(div)如果Tag名称如果以大写开头例如Foo /结果则会通过React.createElement(Foo)创建对应的元素对应的组件则必须在js文件中引入。这段翻译是我瞎掰的手动狗头。 所以我们可以将上面代码中的customIcon方法简化如下
function customIcon(tagName: string) {const Icon Icons[tagName]; // 变量名必须以大写字母开头return Icon /;
}完整代码如下
import React from react;
import ./index.css;
import * as Icons from ant-design/icons; // 注意要先引入icons
import { Space } from antd;function customIcon(tagName: string) {// return React.createElement(Icons[tagName], {}, null);const Icon Icons[tagName]; // 变量名必须以大写字母开头return Icon /;
}const App: React.FC () (Space{customIcon(AreaChartOutlined)}{customIcon(PieChartOutlined)}{customIcon(BarChartOutlined)}/Space
);export default App;完整代码可以在codesandbox里查看https://codesandbox.io/p/sandbox/custom-tag-name-h7zhyt?file%2Fdemo.tsx%3A1%2C1 在codesandbox里我们可以看到效果和之前的效果一模一样都是显示三个图标。 扩展阅读 2022年中华人民共和国县以上行政区划代码 react antd实现动态切换主题功能适用于antd5.x版本 常用的几款Vue移动端UI推荐
