React中HTML字符串转DOM元素失败问题求助

问题详情 #

从API获取HTML字符串后转换为DOM元素，该操作在普通HTML环境中正常运行，但在React里失效。

原代码 #

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link

React报错信息 #

Uncaught Error: Objects are not valid as a React child (found: [object DocumentType]). If you meant to render a collection of children, use an array instead.

更新后的错误 #

执行Document的createElement方法失败：提供的标签名（'undefined'）不是合法名称。

解决办法 #

方法1：用React官方API直接插入HTML #

如果只是要渲染HTML字符串，用dangerouslySetInnerHTML是最简单的方式，这是React专门用来处理直接插入HTML的特性：

function App() {
  const htmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

⚠️ 注意：必须确保要插入的HTML是可信的，防止XSS攻击。

方法2：用第三方库转换为React元素（复杂场景推荐） #

如果需要对HTML内容做更多操作，推荐用html-react-parser，它能直接把HTML字符串转换成React虚拟DOM元素，完全符合React的渲染逻辑。

先安装依赖：

npm install html-react-parser

然后在组件中使用：

import parse from 'html-react-parser';

function App() {
  const htmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
  return parse(htmlString);
}

错误原因说明 #

1. 你用DOMParser以text/xml格式解析HTML字符串，得到的是XML文档对象，React无法直接渲染这类对象——React只识别React元素、字符串、数字等合法渲染类型。
2. 就算拿到真实DOM节点，直接返回给React组件也不行，因为React依赖虚拟DOM管理渲染流程，不支持直接插入真实DOM节点。
3. 更新后的错误是因为尝试把XML节点传给React的createElement方法，XML和HTML的解析规则不同，导致标签名识别异常，改用上面的方法就能解决。

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