在 React 的字符串中渲染 HTML 个实体

Question

我在 React JS 中显示弯引号 HTML 实体时遇到问题。参考 straight and curly quotes

    render() {
      return (
              <h4>
              {theme == 'blue' && 'This is sample text'}
              {theme == 'red' && 'What&rsquo;s your role in this project'}
              </h4>
            )
         }

当前输出

What&rsquo;s your role in this project

预期输出
你在这个项目中的角色是什么

我不想使用 dangerouslySetInnerHTML 或者我不想在反应状态属性中定义这些值。提前致谢。

Answer 1

只需使用模板字符串`What's your role in this project`。

Answer 2

使用String.fromCharCode方法：

查看 React 文档：https://shripadk.github.io/react/docs/jsx-gotchas.html

MDN 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

查找字符代码：http://www.mauvecloud.net/charsets/CharCodeFinder.html

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && `What ${String.fromCharCode(8217}s your role in this project`}
                  </h4>
                )
             }

文本的模板文字 ``

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && `What’s your role in this project`}
                  </h4>
                )
             }

使用双引号和单引号

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && "What’s your role in this project"}
                  </h4>
                )
             }

使用转义符

 return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && 'What \’s your role in this project'}
                  </h4>
                )
             }

Answer 3

如果你真的不能使用"或模板字符串，尝试返回一个片段

<>What&rsquo;s your role in this project</>

Answer 4

经过一些研究，我发现使用 React Fragment 标签

实现此目的的最简单方法

     render() {
      return (
              <h4>
              {theme == 'blue' && 'This is sample text'}
              {theme == 'red' && <Fragment>What&rsquo;s your role in this project</Fragment>}
              </h4>
            )
         }

在 React 的字符串中渲染 HTML 个实体

Render HTML entities inside a string in React

html

javascript

html-entities

reactjs