reactjs - 如何在 polymer 组件内部使用 React？

Question

似乎可以在 polymer 网络组件中使用 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>    
      );
    }
  });

Answer 1

您之前需要注意的主要事情是:

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

• 将您的 ReactApp 与 Traceur Compiler、Babel、Rollup 或 webPack 捆绑在一起。由于浏览器尚未实现导入。

  • 确保您的主文件index.js不会渲染 react 。这将是 Polymer 的责任。

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

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;

示例组件.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>