React JSの間にテキストを太字で表示

Question

以下のコードでは、chartDescの一部の単語のみをスタイル設定したいとします（例えば、「返済期間」）。太字またはイタリックのいずれか。正規表現を試してみましたがうまくいきませんでした。助けてください！

import React from 'react'; 
import Pie from './Pie'; 
import TextTruncate from 'react-text-truncate'; 
import ReactTooltip from 'react-tooltip'; 
import { browserHistory } from 'react-router'; 

export default class Donutchart extends React.Component { 
    constructor(props) { 
     super(); 
    } 

    getElements(id) { 
     let backendData = this.props.data; 
     let width = 120; 
     let height = 120; 
     let radius = Math.min(width, height)/2; 
     let donutWidth = 15; 

     let chartData; 
     let chartDesc; 
     switch(id) { 
      case 'CASH_PURCHASE' :{ 
       chartData = backendData["financialModelToFinancialSummary"][id]; 
       const chartDescValue = backendData["financialModelToFinancialSummary"][id]; 

       chartDesc = `Your estimated Solar Savings over 25 years (after net costs) will be $ ${parseFloat(chartDescValue.savings).toFixed(0)}, the payback period will be ${chartData["roiYear"]} years, and your home will increase in value by $ ${parseFloat(chartDescValue.increaseHomeValue).toFixed(0)}`; 
       break; 
     } 

Answer 1

chartDescは、文字列補間を行う代わりに、コンポーネント自体に設定することができます。

chartDesc = (
    <p> 
    Your estimated Solar Savings over 25 years (after net costs) will be $ {parseFloat(chartDescValue.savings).toFixed(0)}, <b>the payback period</b> will be ${chartData["roiYear"]} years, and your home will increase in value by $ ${parseFloat(chartDescValue.increaseHomeValue).toFixed(0)} 
    </p> 
); 

（HTMLで<b>タグを参照してください）