React JS bold текст между

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

(см <b> тег в HTML)