この関数をステートレス反応コンポーネントに変換してください。

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