代码之家  ›  专栏  ›  技术社区  ›  haaduken

反应Js和聚合物CSS

  •  0
  • haaduken  · 技术社区  · 7 年前

    我有一个react应用程序,我正试图注入聚合物应用程序。Polymer应用程序将处理路由等,我只需要react应用程序出现在其中一个页面上,具有完全样式/功能的事件处理程序等。我无法正确应用样式。

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

    1 回复  |  直到 7 年前
        1
  •  0
  •   haaduken    7 年前

    问题是这个反应。render()通过擦除所有节点并重新写入它们来更新DOM。既然我写这封信。shadowRoot,风格被改写了。

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