javascript - 使段落 Prop 中的某些文本在 react 中加粗的最佳方法是什么？

Question

我将段落放入一个可重用的组件中，但该组件的每个不同实例中的某些单词都是粗体。能够加粗那些特定单词的最佳方法是什么？

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

这是 Prop ，我尝试进行字符串插值以使其变为粗体，但实际 <b>example</b>显示

      <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!`}
  /> 

Answer 1

你可以使用dangerouslySetInnerHTML，下面是演示: https://codesandbox.io/s/q90nz5l184

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