React.Js und Polymer CSS

Question

Ich habe eine Reaktion App, die ich versuche, in eine Polymer-App zu injizieren. Die Polymer-App kümmert sich um das Routing, usw. Ich brauche nur die react-App, die auf einer der vollständig gestylten Seiten mit Event-Handlern usw. angezeigt wird. Ich kann die Stile nicht richtig anwenden.

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

wenn ich Kommentar- die ReactDOM.render() Funktion dann das <style> Element verschwindet und die App Reagieren nicht funktioniert, aber es scheint, im DOM.

Answer 1

Problem ist, dass ReactDOM.render() aktualisiert das DOM durch Löschen aller Knoten und neu schreiben sie. Da ich also in this.shadowRoot schreibe, werden die Stile überschrieben.

Dies kann wie folgt durch Zugabe eines div-Container gelöst werden:

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