业务需求:
期望表格中显示如下数据:尖括号中的数据显示为蓝色,点击后可以出现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
}
}