javascript - 在 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’s your role in this project

预期输出
您在这个项目中扮演什么 Angular 色

我不想使用危险的SetInnerHTML，或者我不想在 react 状态属性中定义这些值。提前致谢。

Answer 1

使用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>
                )
             }