如何将数据库中的HTML字符串转为可渲染的React元素？

方案一：使用官方dangerouslySetInnerHTML属性 #

这是React原生提供的专门渲染HTML字符串的方式，直接给<p>元素配置该属性即可：

function App() {
  const htmlStr = "Intro<br /><br />Paragraph 1<br /><br />Paragraph 2";
  return <p dangerouslySetInnerHTML={{ __html: htmlStr }} />;
}

注意：这个属性带“dangerously”前缀是因为存在XSS风险，如果你的HTML字符串来自不可信来源，必须先做转义处理。

方案二：结合useRef与原生DOM操作（适合需后续操作DOM的场景） #

如果需要对渲染后的DOM做额外处理，可以用useRef获取<p>元素引用，在组件挂载后设置其innerHTML：

import { useRef, useEffect } from 'react';

function App() {
  const htmlStr = "Intro<br /><br />Paragraph 1<br /><br />Paragraph 2";
  const pRef = useRef(null);

  useEffect(() => {
    if (pRef.current) {
      pRef.current.innerHTML = htmlStr;
    }
  }, [htmlStr]);

  return <p ref={pRef}></p>;
}

你之前用document.createElement报错是因为React只能渲染React元素或基础数据类型，直接渲染DOM对象不符合React的渲染规则，上面两种方案都能规避这个问题。

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