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

Question

我有这个功能，可以使数字的尾随零变暗。

恩。

• 123.456000-> 123.456 000
• 100.0000-> 100. 0000
• 456.999990-> 456.99999 0
• 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
  }
}

正则表达式用分类的跨度替换尾随的零，并产生奇迹。

现在，我必须在反应环境中使用它，这对于演示/哑/无状态组件是一个完美的案例。

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（实际上您可以通过涉及危险地SetInnerHTML来实现，但这是另一个主题）

这样的事情应该适合您，但是您当然可以对其进行优化

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