如何在聚合物组分内反应？

Question

似乎可以在聚合物网络组件中使用反应，但我找不到一个有效的例子，只有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>    
      );
    }
  });

Answer 1

以前需要注意的主要事项是：

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

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

  • 确保你的主文件 index.js ，没有做出反应。这将成为Polymer的责任。

  • npm run build（使用npm run build获取的re-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;

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