React + WebWorkers, что делает строку результата ReactDOMServer.renderToString

Question

В WebWorker, я использую ReactDOMServer.renderToString

я передать эту строку обратно в основной поток пользовательского интерфейса с этим:

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

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

но обратно в основной поток пользовательского интерфейса, я не уверен, как на самом деле сделать эту строку ... мне нужно использовать React.dangerouslySetInnerHTML или есть лучший способ?

Строки результат из сообщения WebWorker выглядит это, конечно:

MessageEvent bubbles: false 
    cancelBubble: false 
    cancelable: false 
    currentTarget: Worker 
    data: Object 
    name: "chuckles" 
    testLines: Array[25] 

    0: "<li class="Contact" data-reactid=".252oied3u2o" data-react-checksum="1411403885"><h2 class="Contact-name" data-reactid=".252oied3u2o.0">&gt;[test] foo✔</h2></li>" 
    1: "<li class="Contact" data-reactid=".29kk5vm2sqo" data-react-checksum="2115195156"><h2 class="Contact-name" data-reactid=".29kk5vm2sqo.0">&gt;[test] bar✔</h2></li>" 
    2: "<li class="Contact" data-reactid=".bg6xmnuqdc" data-react-checksum="1668960606"><h2 class="Contact-name" data-reactid=".bg6xmnuqdc.0">&gt;[test] baz✔</h2></li>" 
    3: "<li class="Contact" data-reactid=".1t3vx6pj4sg" data-react-checksum="2019185929"><h2 class="Contact-name" data-reactid=".1t3vx6pj4sg.0">&gt;p[test] makes stuff 5✔</h2></li>" 
    4: "<li class="Contact" data-reactid=".cebbpdy8e8" data-react-checksum="818500766"><h2 class="Contact-name" data-reactid=".cebbpdy8e8.0">&gt;p[test] makes stuff 6✔</h2></li>" 
    5: "<li class="Contact" data-reactid=".1bu0bdc3f9c" data-react-checksum="1304319087"><h2 class="Contact-name" data-reactid=".1bu0bdc3f9c.0">&gt;p[test] makes stuff 7✔</h2></li>" 

    ... 
    25: "<li class="Contact" data-reactid=".1bu6jdc3f9c" data-react-checksum="1404319082"><h2 class="Contact-name" data-reactid=".1bu0bdc3f9c.0">&gt;p[test] makes stuff 25✔</h2></li>" 

Answer 1

У меня есть предварительный ответ, я думаю, что это работает, но я не уверен, если он полностью использует власть из React виртуальной DOM, даже если он является частью библиотеки React.

В моем основном потоке пользовательского интерфейса, у меня есть:

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

     } 

в рабочем, у меня есть это:

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

}; 

поэтому ключ к получению этого к работе заключается в использовании dangerouslySetInnerHTML как так :

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

эта линия выше является важным линия:

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

... это единственный способ я знаю, делает строку, которая создается на переднем конце, используя WebWorker.

Answer 2

dangerouslySetInnerHTML, кажется, работает в этом случае, но, как указано в документации:

(1) Эта функциональность обеспечивается в основном для взаимодействия с DOM строковых манипуляции библиотеками [...]

Это не похоже на то, что здесь.

Кроме того, вы управляете внутренними компонентами извне. Который, по моему опыту, мог бы усложнить прослеживание источника неожиданного поведения.

Лучшим способом сделать это было бы продолжать обработку вашего списка в потоке WebWorker (я думаю, вы хотите сделать там большие вычисления), но передайте обработанные атрибуты обратно в главный поток пользовательского интерфейса, чтобы они могли быть переданы контейнер списка, который затем может сгенерировать ваш список внутри страны.

В архитектуре Flux (2) ваш магазин может нести ответственность за получение результата WebWorker, а затем передать его в View, инициируя визуализацию компонента.