How to convert an HTML string to virtual DOM in React?

Question

I'd like to be able to take a raw HTML string that I insert into a React component via dangerouslySetInnerHTML and have it incorporated into the virtual DOM. Is there any way to do this?

For example, if I have:

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

how can I get htmlFromServer into the virtual DOM? Thanks!

Answer 1

Parts of Facebook's React Magic does what you want:

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

Answer 2

You can do this natively with DOMParser .

Eg:

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