将 React Element 的字符串值的一部分设置为粗体

Question

>我的文件中定义了变量：

var text = `The start of string ${<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.`

此字符串正在传递给 React 元素：

<span>{text}</span>

我希望Bolded或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>之间的文本加粗？

Answer 1

您可以使用dangerouslySetInnerHTML道具实现您想要完成的任务。

查看下面的代码：

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>