阵营+ WebWorkers，渲染ReactDOMServer.renderToString

字符串导致WebWorker，我使用ReactDOMServer.renderToString阵营+ WebWorkers，渲染ReactDOMServer.renderToString

然后我那个字串传递回主UI线程与此：

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

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

但回到主UI线程，我不知道如何实际呈现该字符串...我需要使用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>"

来源

2015-12-28 Alexander Mills

我已经有了一个初步的答案，我想这样的作品，但我不知道这是否充分利用的动力阵营虚拟DOM，即使它是React库的一部分。

在我的主UI线程，我有这样的：

 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前端生成的字符串的唯一途径。

来源

2015-12-28 21:57:45

dangerouslySetInnerHTML似乎在这种情况下工作，但如文档中表示：

（1）此功能主要用于与DOM字符串操作图书馆合作[...]

这似乎不是这里的情况。

另外，您正在操作组件的内部组件。根据我的经验，这可能会更难追查意外行为的来源。

更好的方法是继续处理WebWorker线程中的列表（我想你想在那里做一些大的计算），但将处理后的属性传递回主UI线程，以便它们可以传递给该列表容器可以在内部生成您的列表。

在助熔剂（2）架构，例如，你的商店可以负责接收WebWorker的结果，然后将它传递到您的视图，触发部件渲染。

来源

2015-12-28 22:25:12

阵营+ WebWorkers，渲染ReactDOMServer.renderToString

回答

相关问题