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

Question

我有这个功能，在＆＃39;之后调暗数字的尾随零。＆＃39;

离。

• 123.456000 - ＆gt; 123.456的 000
• 100.0000 - ＆gt; 100.的 0000
• 456.999990 - ＆gt; 456.99999的 0
• 333 - ＆gt; 333

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

.table-cell:drop-target { -fx-background-color: -fx-background ; -fx-background: yellow ; -fx-border-color: -fx-table-cell-border-color -fx-table-cell-border-color transparent transparent ; } .drag-source { -fx-font-size: 18 ; -fx-padding: 10 ; }

这是实际代码

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

regexp用分类的范围替换尾随的零并创造奇迹。

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

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

我该怎么处理？

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