用React实现一个HTML中上标、下标转换工具

前言

最近的项目中有个需求，需要能够在html中实现化学元素的表示，比如上标：SO₂、O₃、CH₄、PM_2.5、PM₁₀，还有一些单位，比如：μg/m³、mg/m³等，这些上下标该如何表示呢？解决这个问题的方式有几种，其中一种是搜狗输入法中的数字范围中可以找到部分上标和下标，但是不是很全，其次就是下面要介绍的HTML中的<sub>、和<sup>标签。

HTML中的sub、sup标签

<sup>标签可定义上标文本;<sub>标签可定义下标文本。

在React中的使用

既然通过<sup>标签和<sub>就可以定义上下标文本，那在React中如何方便的使用呢？这里想到了封装一个简单的React组件来方便使用。

首先定义好一个数据结构：

const INDICES = {
    PM2_5: {
        shows: [{ c: 'PM', t: 'n' }, { c: '2.5', t: 'sub' }],
        units: [{ c: 'μg/m', t: 'n' }, { c: '3', t: 'sup' }]
    },
    PM10: {
        shows: [{ c: 'PM', t: 'n' }, { c: '10', t: 'sub' }],
        units: [{ c: 'μg/m', t: 'n' }, { c: '3', t: 'sup' }]
    },
    SO2: {
        shows: [{ c: 'SO', t: 'n' }, { c: '2', t: 'sub' }],
        units: [{ c: 'μg/m', t: 'n' }, { c: '3', t: 'sup' }]
    },
    NO2: {
        shows: [{ c: 'NO', t: 'n' }, { c: '2', t: 'sub' }],
        units: [{ c: 'μg/m', t: 'n' }, { c: '3', t: 'sup' }]
    },
    O3: {
        show: 'O3',
        units: [{ c: 'μg/m', t: 'n' }, { c: '3', t: 'sup' }]
    },
    CO: {
        show: 'CO',
        shows: [{ c: 'CO', t: 'n' }],
        units: [{ c: 'mg/m', t: 'n' }, { c: '3', t: 'sup' }]
    }
};

封装组件:
思路很简单，就是根据传入组件中的参数进行判断，遇到t==='sub'的就转换为<sub>标签，遇到't===sup'的就转换为<sup>标签。

import React, { Component } from 'react';

class ConvertScriptTool extends Component {
    render() {
        const { data= [] } = this.props;
        return (<span>
            {
                data.map((item, index) => {
                    if(item.t === 'n') {
                        return item.c
                    }else if(item.t === 'sub') {
                        return <sub key={index}>{item.c}</sub>
                    }else if(item.t === 'sup') {
                        return <sup key={index}>{item.c}</sup>
                    }else {
                        return null
                    }
                })
            }
        </span>)
    }
}

export default ConvertScriptTool;

用法如下:

PM_2.5:

<ConvertScriptTool data={INDICES['PM2_5'].shows} /> 

SO₂:

<ConvertScriptTool data={INDICES['SO2'].shows} /> 

下面的是我的公众号二维码图片，欢迎关注。