Преобразуйте эту функцию в компонент, не реагирующий на состояние

Question

У меня есть эта функция, которая уменьшает конечный ноль числа после «.».

ex.

• 123,456000 -> 123,456
• 100,0000 -> 100.
• 456,999990 -> 456,99999
• 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 путем конкатенации строк (на самом деле вы можете вовлекая 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> 
    ) 
    } 
}