Javascript 使段落中的某些文本以粗体显示的最佳方法是什么？

我将段落放入一个可重用组件中，但该组件的每个不同实例中的某些词都是粗体的。什么是最好的方式能够大胆的某些独特的话

class Recommendations extends Component{
    constructor(){
        super();
    }

    render(){
        let { mainHeader, secondaryHeader, paragraph1, paragraph2, photoClass } = this.props;
        return (
            <div className="mainRecommendationContainer">
                <div class="recommendationContainer">
                    <div className="headerContainer">
                        <h1>{mainHeader}</h1>
                        <h2>{secondaryHeader}</h2>
                    </div>
                    <p>{paragraph1}</p>
                    <p>{paragraph2}</p>
                </div>
                <div className={photoClass}>

                </div>
                <Link to={`/`} activeClassName="active">  <div className="homeButton"></div></Link>
                <Link to={'/'} activeClassName="active"><div className="back"></div></Link>
            </div>
        )
    }
}

export default Recommendations

类建议扩展组件{
构造函数（）{
超级（）；
}
render（）{
设{mainHeader，secondaryHeader，paragraph1，paragraph2，photoClass}=this.props；
返回(
{mainHeader}
{secondaryHeader}
{第1段}

{第2段}

)
}
}
导出默认建议

这是道具，我尝试使用字符串插值将其加粗，但实际的

示例显示了

      <Recommendations
      mainHeader={'Almost perfect!'.toUpperCase()}
      secondaryHeader={'You’ve Got Very Little Damage!'.toUpperCase()}
      paragraph1={`Your hair is pretty healthy, but daily ${'example'.bold()} at the ends of your hair can make sure itfeels awesome!`}
  /> 

您可以使用
危险的LysetinerHTML
，以下是演示：

类建议扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
设{mainHeader，secondaryHeader，paragraph1，paragraph2，photoClass}=this.props；
返回(
{mainHeader}
{secondaryHeader}

{第2段}

)
}
}

class Recommendations extends React.Component {
  constructor() {
    super();
  }

  render() {
    let { mainHeader, secondaryHeader, paragraph1, paragraph2, photoClass } = this.props;
    return (
      <div className="mainRecommendationContainer">
        <div class="recommendationContainer">
          <div className="headerContainer">
            <h1>{mainHeader}</h1>
            <h2>{secondaryHeader}</h2>
          </div>
          <p dangerouslySetInnerHTML={{__html: paragraph1}} />
          <p>{paragraph2}</p>
        </div>
        <div className={photoClass}>
        </div>
      </div>
    )
  }
}