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>标记）