如何在 React 中将 HTML 字符串转换为虚拟 DOM？

Question

我希望能够获取通过

dangerouslySetInnerHTML

插入到 React 组件中的原始 HTML 字符串，并将其合并到虚拟 DOM 中。有什么办法可以做到这一点吗？

例如，如果我有：

<Component dangerouslySetInnerHTML={{__html: htmlFromServer}}></Component>

如何将

htmlFromServer

放入虚拟 DOM 中？谢谢！

Answer 1

Facebook React Magic 的部分功能可以满足您的需求：

https://github.com/reactjs/react-magic

Answer 2

您可以使用

DOMParser

本地执行此操作。

例如：

let doc = new DOMParser().parseFromString(htmlFromServer, 'text/html'),
    body = doc.querySelector('body'),
    div = document.createElement('div');

div.textContent = 'DOM manipulated.';
body.appendChild(div);

return <Component dangerouslySetInnerHTML={{__html: body.innerHTML}}></Component>;