React使用动态标签名称

古城微笑少年丶 2024-02-05 21:23 44阅读 0赞

最近在一项目里（React + antd）遇到一个需求，某项基础信息里有个图标配置（图标用的是antd的Icon组件），该项基础信息的图标信息修改后，存于后台数据库，后台数据库里存的是antd Icon组件的图标Tag名称，如`AreaChartOutlined`、`PieChartOutlined`、`BarChartOutlined`等，另外在展示页面，需要根据该项信息的Tag名称，显示对应的antd图标。

### antd 图标的使用方法 ###

正常情况下安装`@ant-design/icons`依赖后，就可以在页面中使用antd图标，如：

$ npm install @ant-design/icons --save

import {
         HomeOutlined } from '@ant-design/icons';
    
    const App: React.FC = () => (
      <Space>
        <HomeOutlined />
      </Space>
    );

但是如果页面中，图标的Tag名称不确定，又如何使用呢？

### 方案1. 使用React.createElement创建元素 ###

关于`React.createElement`的详细用法，可以阅读文档：[https://react.dev/reference/react/createElement][https_react.dev_reference_react_createElement]  
`React.createElement(type, props, ...children)`包含三个参数：

*  type: 该参数必须为一个有效的React组件类型，例如，其可以是一个Tag名称（如div或者span），也可以是一个React组件（一个函数、一个类或者一个特殊组件如Fragment）
 *  props: 该参数应是一个对象或者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][https_codesandbox.io_p_sandbox_react-createelement-chuang-jian-dong-tai-yuan-su-3hndf2_file_2Fdemo.tsx_3A1_2C1]  
在codesandbox里我们可以看到，效果和我们预想的一样，正常显示了三个图标：  
![三个图标正常显示][5b15cf92b35940f6abd31c64f02a2740.png]

### 方案2. 使用自定义Tag Name ###

但是对于上述方法，个人感觉有一点点的繁琐。  
在一番搜索之下，看到React官方文档里有这么一句话：（链接：[https://legacy.reactjs.org/docs/jsx-in-depth.html\#user-defined-components-must-be-capitalized][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][https_codesandbox.io_p_sandbox_custom-tag-name-h7zhyt_file_2Fdemo.tsx_3A1_2C1]  
在codesandbox里我们可以看到，效果和之前的效果一模一样，都是显示三个图标。

**扩展阅读：**  
[2022年中华人民共和国县以上行政区划代码][2022]  
[react + antd实现动态切换主题功能（适用于antd5.x版本）][react _ antd_antd5.x]  
[常用的几款Vue移动端UI推荐][Vue_UI]

[https_react.dev_reference_react_createElement]: https://react.dev/reference/react/createElement
[https_codesandbox.io_p_sandbox_react-createelement-chuang-jian-dong-tai-yuan-su-3hndf2_file_2Fdemo.tsx_3A1_2C1]: https://codesandbox.io/p/sandbox/react-createelement-chuang-jian-dong-tai-yuan-su-3hndf2?file=%2Fdemo.tsx%3A1%2C1
[5b15cf92b35940f6abd31c64f02a2740.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/95054b3827fe44bd94dde70b4f989555.png
[https_legacy.reactjs.org_docs_jsx-in-depth.html_user-defined-components-must-be-capitalized]: https://legacy.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
[https_codesandbox.io_p_sandbox_custom-tag-name-h7zhyt_file_2Fdemo.tsx_3A1_2C1]: https://codesandbox.io/p/sandbox/custom-tag-name-h7zhyt?file=%2Fdemo.tsx%3A1%2C1
[2022]: https://blog.csdn.net/m0_58016522/article/details/135306117
[react _ antd_antd5.x]: https://blog.csdn.net/m0_58016522/article/details/131168634
[Vue_UI]: https://blog.csdn.net/m0_58016522/article/details/128844719