我在我的文件中定义了变量:
var text = `The start of string ${<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.`
该字符串被传递给 React 元素:
<span>{text}</span>
我想要文字Bolded
or Also Bolded
当组件呈现时加粗,但根据我尝试传递字符串的方式,我要么得到[object Object]
相反或<b>Bolded</b>
.
我发现工作的唯一方法是:
var text = <React.Fragment>The start of string {<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.</React.Fragment>
但这看起来相当冗长,有时字符串是简单的并且不包含任何占位符,因此使用 React 元素来包装它似乎没有必要。另外,我希望能够将值存储在数据库中,并且在检索时应该以显示标记为粗体的文本的方式进行插值。
问题:有什么办法可以让文本之间<b></b>
当组件渲染时,在粗体字符串中?
您可以使用以下方法实现您想要实现的目标dangerouslySetInnerHTML https://reactjs.org/docs/dom-elements.html?#dangerouslysetinnerhtml props.
看下面的代码:
function App(props) {
const text = {
__html: `The start of string <b>${
props.isTrue ? "Bolded" : "Also Bolded"
} </b> the end of string.`
};
return <span dangerouslySetInnerHTML={text} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App isTrue={true} />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)