我将段落放入一个可重用的组件中,但该组件的每个不同实例中的某些单词都是粗体。能够加粗那些特定单词的最佳方法是什么?
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!`}
/>
最佳答案
你可以使用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>
)
}
}
关于javascript - 使段落 Prop 中的某些文本在 react 中加粗的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48770644/