javascript - React + WebWorkers，渲染ReactDOMServer.renderToString 的字符串结果

Question

在 WebWorker 中，我使用 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>"

Answer 1

dangerouslySetInnerHTML 似乎在这种情况下有效，但如文档中所述:

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

这里似乎不是这种情况。

此外，您正在从外部操纵组件的内部结构。根据我的经验，这可能会使追踪意外行为的来源变得更加困难。

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

例如，在 Flux( 2 ) 架构中，您的商店可能负责接收 WebWorker 的结果，然后将其传递给您的 View ，触发组件渲染。