将此函数转换为无状态 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">' + '' + '</span>')
  } else {
    return str
  }
}

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

现在我必须在反应环境中使用它，这是 presentational/dumb/stateless 组件的完美案例。

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'>{  }</span>
      // ...woops! this cannot work with jsx since it's not a string 
      // to replace stuff into and  does mean nothing in there
    )
    return (<span>{value}.{trailing}</span>)
  } else {
    return (
      <span>{value}</span>
    )
  }
}

我该如何处理？

Answer 1

你很接近，并且已经明白你不能通过连接字符串来制作 JSX（实际上你可以通过涉及 dangerouslySetInnerHTML，但那是另一个话题）

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

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

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

Convert this function to a stateless react component

javascript

regex

number-formatting

reactjs