React.JsとPolymer CSS

Question

私はPolymerアプリケーションに注入しようとしている反応アプリがあります。 Polymerアプリケーションはルーティングなどを処理しますが、イベントハンドラなどで完全にスタイル/機能を持つページの1つに表示するには、反応するアプリケーションが必要です。適切に適用するスタイルを取得できません。

<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を更新するという問題です。だから私はthis.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>