React + WebWorkers, rendering the string result of ReactDOMServer.renderToString

dangerouslySetInnerHTML seems to work in this case, but as stated in the documentation:

(1)This functionality is mainly provided for cooperation with DOM string manipulation libraries [...]

Which doesn't seem to the be the case here.

Also, you're manipulating the internals of a component from outside of it. Which, in my experience, could make harder to trace the source of unexpected behavior.

A better way to do it would be to keep processing your list in the WebWorker thread (I imagine you want to make some big computations there) but pass the processed attributes back to the Main UI Thread so they can be passed to the list container that could then generate your list internally.

In a Flux(2) architecture, for example, your store could be responsible for receiving the result of the WebWorker and then pass it to your View, triggering the component render.

I have a preliminary answer, I think this works, but I am not sure if it fully utilizes the power of the React virtual DOM, even if it is part of the React library.

In my main UI thread, I have this:

     render: function() {

            var self = this;


            var lines = this.state.testLines.map(function (line, i) {
                return React.createElement('div', {key: i, dangerouslySetInnerHTML: {__html: line}});
            });

            return React.createElement('div', {}, lines);

        }

in the worker, I have this:

    if (typeof importScripts === 'function') {
        importScripts('//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js');
        importScripts('//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js');
        importScripts('/js/vendor/react-dom-server.js');
        importScripts('//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js');
     }

  onmessage = function (msg) {

    var data = msg.data;

    var lines = doTheThing(data);

    lines = lines.map(function(line){
        return ReactDOMServer.renderToString(ContactItem({line: line}));
    });

    postMessage({
        testResult: 'pass',
        testLines: lines
    });

    close();

};

so the key to getting this to work is to use dangerouslySetInnerHTML like so:

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

this line above being the important line:

return React.createElement('div', {key: i, dangerouslySetInnerHTML: {__html: line}});

...this is the only way I know of rendering a string that is generated on the front-end using a WebWorker.