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

Question

我希望能够通过使用dangerouslySetInnerHTML将一个原始的HTML字符串插入到React组件中，并将其合并到虚拟DOM中。有没有什么方法可以做到这一点？

例如，如果我有以下代码：

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

我该如何将htmlFromServer放入虚拟DOM中？谢谢！

- williardx

---

你到目前为止尝试了什么？ - Ricardo Pontual

你为什么需要这样做？你想要实现什么目标？ - azium

我的应用程序的一部分通过从服务器加载原始HTML，然后将其填充到React组件中来工作。我希望能够使用React异步加载的HTML进行操作（例如使用findDOMNode等）。 - williardx

Answer 1

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

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

- cleong

Answer 2

你可以使用 DOMParser 本地化地完成这个任务。

E.g.:

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>;

- ericsoco