可以在React中使用Polymer吗?

时间:2014-10-14 16:19:52

标签: html polymer reactjs

我一直在使用React,并希望在React中使用Polymer标签。 React不识别Polymer标签,因为React只处理基本的DOM标签。有没有办法将Polymer标签添加到React DOM库?

6 个答案:

答案 0 :(得分:8)

是否可以在React内部使用Polymer?

简短回答:不是真的。

答案很长:有点儿。您必须创建直接创建节点和操作属性的组件。元素的子元素还有其他注意事项。

是否可以在Polymer内部使用React?

这种答案几乎相同,你必须将React组件包装在聚合物元素中。

为什么?

聚合物(基于Web组件)和React(ui组件库)都基于'组件'。因为在网络中没有单一的方式来表达组件,所以您需要在各种库之间架起桥梁。同样适用于有关角度'反应' jquery插件的反应,'淘汰jquery插件''反应在骨干' 39;,'与聚合物元素成角度,使用骨架并与使用角度等的聚合物元素反应。

在像聚合物有角度的情况下,您可能会认为它非常简单,但聚合物并不知道评估角度表达式或任何类型的声明性回调。几乎在每种情况下你都需要一座桥梁,它们永远不会漂亮。

答案 1 :(得分:7)

这是一个相当古老的问题,但https://www.npmjs.com/package/react-polymer怎么样?这不是聚合物组分的反应支持物吗?

ContactDetail

答案 2 :(得分:3)

根据反应和聚合物的当前阶段回答

由于这个问题刚才问过,而且从那以后发生了很多变化,我想补充一点,你现在可以直接使用聚合物元素反应但是对于你的自定义属性和事件它会导致问题很容易处理通过使用react-polymer,它支持几乎所有元素,但gold-*元素除外。

为什么要使用Polymer进行反应?

  1. 它可以进一步简化您的开发过程或使其变得一团糟。这取决于你如何使用它
  2. 聚合物组件提供的开发速度和易用性是无与伦比的。
  3. React可以进一步将由聚合物组分组成的组分分解成易于处理的组分。
  4. 仅仅因为,反应和JSX就是爱。
  5. 嘿,为什么不呢?

答案 3 :(得分:1)

答案是。但这不是直截了当的。因此,我尝试遵循一些实际上甚至是官方的文档,但最好的是:https://medium.com/jens-jansson/start-using-web-components-in-react-6ccca2ca21f9

我按照提到的步骤进行了工作!我还提到了github回购,其中我尝试集成了vaadin datepicker和聚合物元素纸张输入之一。 https://github.com/manit815/react-with-webcomponent

答案 4 :(得分:0)

是的,您可以在内部使用Polymer元素进行反应。

  1. 创建聚合物元素

    import { LitElement, html } from 'lit-element';
    export class CustomButton extends LitElement {
    static get properties() {
        return {
            isDisabled : { type: Boolean },
            buttonType: { type: String },
        };
    }
    
    constructor() {
        super();
        this.isDisabled = false;
        this.button = 'button';
    }
    
    render() {
        return html`
            <button>
                <slot></slot>
            </button>
        `;
       }
    }
    
    customElements.define('polymer-button', CustomButton);
    
  2. 使用<script type="module">将元素导入HTML文件。 使用import语句(如上所示)从另一个ES6模块中导入它。

    <script type="module" src="./polymer-button.js">
    
  3. 导入后,就可以使用自定义元素,就像使用标准元素一样。

    import React from 'react';
    export const PolymerButton = () => {
       return ( 
           <polymer-button /> 
        )
    }
    

答案 5 :(得分:-1)

我今天刚试过这个,我能够成功地使用元素目录中的材料元素。我还没有彻底地测试它,但是就React中的标签而言,它可以工作,并且所有的html和css都在那里。

要使用现有元素,只需按照using elements guide.

进行操作即可