React.Js和聚合物CSS

Question

我有一個反應應用程序，我正試圖注入聚合物應用程序。聚合物應用程序將處理路由等，我只需要反應應用程序出現在完全樣式/功能與事件處理程序等頁面之一。我無法正確應用樣式。

<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="storm-styles.html"> 

<script src="../node_modules/react/dist/react.min.js"></script> 
<script src="../node_modules/react-dom/dist/react-dom.min.js"></script> 
<script type="text/javascript" src="../build/react-diagrams/static/js/main.aaa88ec6.js"></script> 

<dom-module id="my-view4"> 
    <template> 
    <style include="storm-styles"></style> 
    </template> 
    <script> 
    class MyView4 extends Polymer.Element { 
     static get is() { return 'my-view4'; } 

     ready() { 
      super.ready(); 
/* 
      ReactDOM.render(
      React.createElement(
       Provider, 
       null, 
       React.createElement(
       App, 
       null 
       ) 
      ), 
      this.shadowRoot 
      );*/ 
     } 
    } 

    window.customElements.define(MyView4.is, MyView4); 
    </script> 
</dom-module> 

如果我取消了ReactDOM.render()函數，則<style>元素消失和作出反應的應用程序無法正常工作，但它出現在DOM。

Answer 1

問題是ReactDOM.render（）通過擦除所有節點並重寫它們來更新DOM。所以，因爲我正在寫這個.shadowRoot，所以樣式會被覆蓋。

這可以通過添加一個div容器如下來解決：

<dom-module id="my-view4"> 
    <template> 
    <style include="storm-styles"></style> 
    <div id="reactcontainer"></div> 
    </template> 
    <script> 
    class MyView4 extends Polymer.Element { 
     static get is() { return 'my-view4'; } 

     ready() { 
      super.ready(); 

      ReactDOM.render(
      React.createElement(
       Provider, 
       null, 
       React.createElement(
       App, 
       null 
       ) 
      ), 
      this.$.reactcontainer 
      ); 
     } 
    } 

    window.customElements.define(MyView4.is, MyView4); 
    </script> 
</dom-module>