将React Element的字符串值的一部分加粗

时间:2018-08-26 20:57:49

标签: javascript reactjs

我在文件中定义了变量:

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

此字符串将传递给React元素:

<span>{text}</span>

我希望在组件呈现时将文本BoldedAlso Bolded加粗,但是根据我尝试传递字符串的方式,我要么得到[object Object]要么得到{ {1}}。

我发现工作的唯一方法是:

<b>Bolded</b>

但是这似乎很冗长,有时字符串是纯文本,不包含任何占位符,因此使用React元素包装它似乎是不必要的。另外,我希望能够将值存储在数据库中,并且在检索到该值时,应该采用插值的方式进行插值,以显示标记为粗体-粗体的文本。

问题:在呈现组件时,有什么方法可以使字符串中var text = <React.Fragment>The start of string {<b>{this.state.isTrue ? 'Bolded' : 'Also Bolded'</b>} the end of string.</React.Fragment> 之间的文本加粗?

1 个答案:

答案 0 :(得分: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>