Reagieren Sie JS fett den Text dazwischen

Question

In dem folgenden Code möchte ich nur einige Wörter für chartDesc (zum Beispiel "die Amortisationszeit") stylen. Entweder fett oder kursiv usw. Ausprobiert reguläre Ausdrücke, hat nicht funktioniert. Bitte helfen Sie!

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

Sie können chartDesc gesetzt eine Komponente selbst zu sein, statt String-Interpolation zu tun.

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> Tag in html sehen)