Javascript 将此函数转换为无状态react组件

我有一个函数，它在“.”之后使数字的尾随零变暗

前

• 123.456000->123.456000
• 100.0000->100.0000
• 456.999990->456.999990
• 333->333

此函数生成的最终html类似于

123.456000

这是实际代码

// Only fade trailing zeros if they are decimals
function fadeTrailingZeros (val) {
  var str = val + ''
  if (str.match(/\./)) {
    return str.replace(/(0+)$/g, '<span class="trailing-zeros">' + '$1' + '</span>')
  } else {
    return str
  }
}

//仅当尾随的零是小数时才淡入淡出
功能衰减跟踪零点（val）{
var str=val+''
if（str.match（/\./））{
返回str.replace（/（0+）$/g，'+'$1'+''）
}否则{
返回str
}
}

regexp用一个分类的范围替换后面的零，效果非常好

现在我必须在react环境中使用它，这是表示/哑/无状态组件的完美案例

import React from 'react'

export default function fadeTrailingZeros ({ value }) {
  if (value.match(/\./)) {
    const [prec, dec] = value.split('.')
    const trailing = dec.replace(
      /(0+)$/g, 
      <span className='trailing-zeros'>{ $1 }</span>
      // ...woops! this cannot work with jsx since it's not a string 
      // to replace stuff into and $1 does mean nothing in there
    )
    return (<span>{value}.{trailing}</span>)
  } else {
    return (
      <span>{value}</span>
    )
  }
}

从“React”导入React
导出默认函数fadeTrailingZeros（{value}）{
if（value.match（/\./））{
常量[prec，dec]=值拆分（'.'））
常数尾部=十二月更换(
/（0+）$/g，
{ $1 }
//…呜呜！这不能用于jsx，因为它不是字符串
//把东西换成1美元并不意味着什么
)
返回（{value}.{training}）
}否则{
返回(
{value}
)
}
}

---

我该如何处理呢？

您已经知道，不能通过连接字符串来生成JSX（实际上可以通过使用危险的LysetinerHTML，但这是另一个主题）

类似的东西应该适合你，但你肯定可以优化它

const FadeTrailingZeros = ({ value }) => {
  if (value.match(/\./)) {
    let [prec, dec] = value.split('.')
    const trailingZeros = dec.match(/(0+)$/g)
    dec = dec.replace(/(0+)$/g, '')
    return (<span>{prec}.{dec}{trailingZeros && <span className='trailing-zeros'>{trailingZeros[0]}</span>}</span>)
  } else {
    return (
      <span>{value}</span>
    )
  }
}

const FadeTrailingZeros=（{value}）=>{
if（value.match（/\./））{
let[prec，dec]=value.split（'.'））
常数trailingZeros=dec.match（/（0+）$/g）
12月=12月替换（/（0+）$/g'，）
返回（{prec}.{dec}{trailingZeros&&{trailingZeros[0]}）
}否则{
返回(
{value}
)
}
}

React DOM描述符是JS对象而不是字符串，所以不能使用标准的字符串替换。