React.Js 和聚合物 CSS

Question

我有一个 React 应用程序，我正试图将其注入 Polymer 应用程序。 Polymer 应用程序将处理路由等，我只需要反应应用程序完全显示在其中一个页面上 styled/functional 带有事件处理程序等。我无法正确应用样式。

<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> 元素就会消失，React 应用程序将无法运行，但它会出现在 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>

React.Js 和聚合物 CSS

React.Js and Polymer CSS

javascript

css

dom

reactjs

polymer