如何在聚合物组分内部使用反应? [英] How to use react inside a polymer component?

问题描述

似乎可以在聚合物网络组件中使用 react ，但我找不到工作示例，只有 这个，但它似乎已经过时了.

It seems it could posible to use react inside a polymer web component but I couldn’t find a working example, only this, but it seems outdated.

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>    
      );
    }
  });

推荐答案

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

The main things you gotta take care of before, is:

• 将 index.jsx 转换为 index.js javacript 形式(https://github.com/jsx/JSX)
  • babel --plugins transform-react-jsx
  • transform the index.jsx into index.js javacript form (https://github.com/jsx/JSX)
    • babel --plugins transform-react-jsx

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

    Bundle up your reactApp with Traceur Compiler, Babel, Rollup or webPack. Since imports aren't yet implemented in browsers.

    • 确保您的主文件 index.js 不会对渲染做出反应.这将是 Polymer 的责任.

    • make sure you main file index.js, doesn't render's react. That's going to be Polymer's responsibility.

    npm run build(通过reac-redux的npm run build获得)

    npm run build (obtained with npm run build for reac-redux)

    index.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;
    

    example-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;dr

    您可以在此处查看不导入的最简单示例:

    You can see my simplest example without importing here:

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

    这篇关于如何在聚合物组分内部使用反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！