如何在聚合物组分内部使用react？

IT技术 reactjs polymer web-component
2021-04-29 17:28:27

似乎可以在聚合物网络组件中使用 react ，但我找不到一个有效的例子，只有this，但它似乎已经过时了。

HTML

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html" />
<polymer-element name="my-polymer" constructor="" attributes="name">
    <template>
      <P>I AM {{name}}</P>
      <div id="reactContainer"></div>
    </template>
    <script type="text/jsx">
      /** @jsx React.DOM **/
      Polymer('my-polymer', {
        created: function(){},
        ready: function(){},
        attached: function(){},
        domReady: function(){
          React.renderComponent(<MyReact name="REACT INSIDE POLYMER"/>, this.$.reactContainer);
        },
        detached: function(){},
        attributeChanged: function(attrName, oldVal, newVal) {}
      });
    </script>
</polymer-element>
<my-polymer name="POLYMER"></my-polymer>

JS

/** @jsx React.DOM */
  var MyReact = React.createClass({
    render: function() {
      return (
        <p>I AM {this.props.name}</p>    
      );
    }
  });
1个回答

之前你需要处理的主要事情是：

  • 将index.jsx转换为index.js javacript 形式（https://github.com/jsx/JSX）
    • babel --plugins transform-react-jsx

  • 使用 Traceur Compiler、Babel、Rollup 或 webPack 捆绑您的 reactApp。由于导入尚未在浏览器中实现。

    • 确保你的主文件index.js没有渲染的react。这将是 Polymer 的责任。

    • npm run build（通过npm run buildreac-redux 获得）

索引.js

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import reducer from './reducers'

window.Render = render;
window.React = React;
window.CreateStore = createStore;
window.Provider = Provider;
window.App = App;
window.Reducer = reducer;

示例-component.html

  <link rel="import" href="../polymer/polymer-element.html">

  <dom-module id="example-component">
    <template>
    </template>

    <script src="./main.bundleFromReact.js"></script>

    <script>
     class ExampleComponent extends Polymer.Element {
        static get is() { return 'example-component'; }

        ready() {
          super.ready();
          const store = CreateStore(Reducer);

          Render(
            React.createElement(
              Provider,
              {store: store},
              React.createElement(
                App,
                null
              )
            ),
            this.shadowRoot
          );
        }
      }
      window.customElements.define(ExampleComponent.is, ExampleComponent);
      </script>
   </dom-module>

tl;博士

你可以在不导入的情况下看到我最简单的例子： 

<link rel="import" href="../polymer/polymer-element.html">
<script src="../react/react.min.js"></script>
<script src="../react/react-dom.min.js"></script>

<dom-module id="example-component">
   <template></template>

   <script>
     class HelloMessage extends React.Component {
       render() {
         return React.createElement(
           'div',
           {}, `Hello ${this.props.name}`);
       }
     }

     class ExampleComponent extends Polymer.Element {
     static get is() { return 'example-component'; }

     ready() {
       super.ready();

       var mountPoint = document.createElement('span');
       this.shadowRoot.appendChild(mountPoint);

       ReactDOM.render(
         React.createElement(HelloMessage, {name: 'Maestro'}),
         mountPoint
       );
     }
  }

  window.customElements.define(ExamplComponent.is, ExamplComponent);
</script>

其它你可能感兴趣的问题
上一篇如何修复本地主机中的react cors 错误？ 下一篇如何将 material-ui TextField 设置为仅接受十六进制字符