如何在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本地执行此操作。

E.g：

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

div.textContent = 'You DOM manipulator, you.';
body.appendChild(div);

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