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

Question

我有一个函数可以使“.”之后数字的尾随零变暗

例如。

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

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

123.456 <span class="trailing-zeros"> 000 </span>

这是实际的代码

// 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
  }
}

正则表达式用分类的范围替换了尾随的零，并且产生了奇迹。

现在我必须在 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>
    )
  }
}

我该如何处理？

Answer 1

你已经很接近了，并且已经明白你不能通过连接字符串来创建 JSX(实际上你可以通过使用angerouslySetInnerHTML，但那是另一个主题)

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

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>
    )
  }
}