React/JS中如何将含特殊字符的字符串转为正常文本渲染？

你从API获取的字符串包含HTML实体（比如"、"这类转义字符），直接在JSX中渲染会显示原始文本，无法解析成对应的符号。以下是几种可行的解决方法：

方法一：使用dangerouslySetInnerHTML #

React提供的dangerouslySetInnerHTML属性可以直接插入HTML内容，自动解析其中的HTML实体。修改代码如下：

export default function Quiz(props){
  const element = "In which year did the British television series "The Bill" end?"
  
  return (
    <main>
      <div dangerouslySetInnerHTML={{ __html: element }} />
    </main>
  )
}

注意：该方法会直接解析HTML内容，若API返回的数据不可信，可能存在XSS攻击风险，仅在数据安全的场景下使用。

方法二：手动解析HTML实体 #

通过浏览器原生的HTML解析能力转换实体字符，避免执行HTML标签，安全性更高：

export default function Quiz(props){
  const element = "In which year did the British television series "The Bill" end?"

  // 解析HTML实体的工具函数
  const decodeHtmlEntities = (str) => {
    const textArea = document.createElement('textarea');
    textArea.innerHTML = str;
    return textArea.value;
  }
  
  return (
    <main>
      {decodeHtmlEntities(element)}
    </main>
  )
}

方法三：使用第三方解析库（可选） #

如果需要处理大量复杂的HTML实体，可使用成熟的第三方库he：

1. 先安装依赖：

npm install he

2. 在代码中调用解析方法：

import he from 'he';

export default function Quiz(props){
  const element = "In which year did the British television series "The Bill" end?"
  
  return (
    <main>
      {he.decode(element)}
    </main>
  )
}

内容的提问来源于stack exchange，提问作者Parmeet Singh