[英]React.Js and Polymer CSS
I have a react app I am trying to inject into a Polymer app. 我有一个尝试应用到Polymer应用程序中的React应用程序。 The Polymer app will handle the routing, etc, I just need the react app to appear on one of the pages fully styled/functional with event handlers etc. I cannot get the styles to apply properly.
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>
if I uncomment the ReactDOM.render()
function then the <style>
element vanishes and the React app doesn't work, but it appears in the DOM. 如果我取消注释
ReactDOM.render()
函数,则<style>
元素消失并且React应用程序不起作用,但它出现在DOM中。
Problem is that ReactDOM.render() updates the DOM by erasing all nodes and re-writing them. 问题是ReactDOM.render()通过擦除所有节点并重写它们来更新DOM。 So since I'm writing to this.shadowRoot, the styles get over-written.
因此,由于我正在写this.shadowRoot,因此样式被覆盖。
This can be solved by adding a container div as follows: 可以通过添加容器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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.