react+antd实现尖括号变量追踪

 业务需求：

 

        期望表格中显示如下数据：尖括号中的数据显示为蓝色，点击后可以出现tooltip，tooltip里面显示对应的值，若tooltip中还含有携带<>的值就可以继续点击显示tooltip

 

 封装组件: 

import React, { useEffect, useState } from 'react'
import { Button, Spin, Tooltip } from 'antd'
import { EditFilled } from '@ant-design/icons'
import styles from './index.module.less'

interface IVarTooltip {
  data: string
  ids?: number[]
}

const TooltipTitle = id => {
  const [state, changeState] = useState({
    data: '',
    ids: [],
    loading: true
  })
  useEffect(() => {
    getData()
  }, [])
  const getData = () => {
    setTimeout(() => {
    //模拟根据id发起请求获取数据
      console.log(id)
      changeState({
        data: 'a=<b>+<c>',
        ids: [],
        loading: false
      })
    }, 1000)
  }
  const editVar = () => {
    // 编辑的操作
  }
  return (
    <Spin size="small" spinning={state.loading}>
      {state.data && (
        <>
          {dealData(state.data, state.ids)}
          <Button type="link" onClick={editVar} icon={<EditFilled />} />
        </>
      )}
    </Spin>
  )
}

const dealData = (data, ids) => {
  let dom = void 0
  const reg = /\<(.+?)\>/g
  const marker = '<>'
  const speData = data.match(reg)
  const newData = data.replace(reg, marker)
  if (speData?.length) {
    newData.split(marker)?.forEach((item, index) => {
      if (speData[index]) {
        const Tool = (
          <>
            {item}
            <Tooltip
              trigger="click"
              color="#fff"
              overlayClassName={styles.tooltip}
              title={<TooltipTitle id={ids[index]} />}
            >
              <a>{speData[index]}</a>
            </Tooltip>
          </>
        )
        dom = dom ? (
          <>
            {dom}
            {Tool}
          </>
        ) : (
          Tool
        )
      } else {
        dom = (
          <>
            {dom}
            {item}
          </>
        )
      }
    })
  }
  return <>{dom || data}</>
}

const VarTooltip = ({ data, ids }: IVarTooltip) => {
  return dealData(data, ids)
}

export default VarTooltip

样式：

.tooltip {
  .ant-tooltip-inner {
    color: #333;
    padding: 10px;
    max-width: 400px
  }
}