React 中如何在 div 内渲染从数据库获取的 raw HTML 字符串？

React默认会对插入JSX的字符串内容做HTML转义处理，以此规避XSS跨站脚本攻击，所以直接把存储的HTML字符串写在{}中渲染时，所有HTML标签都会被当成普通文本展示，就会出现你截图中的效果：

你可以使用React内置的dangerouslySetInnerHTML属性实现原生HTML的渲染，该属性接收一个对象，需将你的HTML字符串赋值给对象的__html字段。

修改后的代码如下：

const style = {
    border: '2px solid #eee',
    height: '270px',
    width: '100%',
    overflow: 'auto',
    padding: '10px'
}

const test = () => {
   const [contentFromDB, setContentFromDB] = useState("");

   useEffect(() => {
       async function fetchData() {
          setContentFromDB(await myAPI.getData())
       }
       // 补充原代码遗漏的函数调用
       fetchData()
   }, []);

   return (
      <>
        <div className="row">
           <h3>Test Render</h3>
           <div style={style} dangerouslySetInnerHTML={{__html: contentFromDB}}>
           </div>
        </div>
      </>
   )
}

export default test;

注意事项 #

• dangerouslySetInnerHTML带有风险标识的原因是直接渲染不可信的HTML内容会引发严重的XSS攻击风险，如果你的数据库中的HTML是普通用户可提交的内容，必须先对内容做消毒处理，建议使用DOMPurify这类专业的HTML消毒库过滤掉危险标签、属性后再进行渲染。

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