html-是否可以在React中使用Polymer?

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

Vu Dang asked 2020-08-02T18:37:16Z
6个解决方案
52 votes

是的,有可能。

  1. 创建一个聚合物元素。

    'use strict';
    
    import React from 'react';
    
    class MyComponent extends React.Component{
        render(){
            return (
                <calender-element></calender-element>
            );
        }
    }
    
    export default MyComponent;
    
    'use strict';
    
    import React from 'react';
    
    class MyComponent extends React.Component{
        render(){
            return (
                <calender-element></calender-element>
            );
        }
    }
    
    export default MyComponent;
    
  2. 通过将聚合物组件导入html页面,使它成为html标签。 例如。 将其导入您的React应用程序的index.html中。

    'use strict';
    
    import React from 'react';
    
    class MyComponent extends React.Component{
        render(){
            return (
                <calender-element></calender-element>
            );
        }
    }
    
    export default MyComponent;
    
  3. 在jsx文件中使用该元素。

    'use strict';
    
    import React from 'react';
    
    class MyComponent extends React.Component{
        render(){
            return (
                <calender-element></calender-element>
            );
        }
    }
    
    export default MyComponent;
    
Sanjeev answered 2020-08-02T18:37:44Z
9 votes

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

简短的回答:并非如此。

长答案:有点。 您必须创建直接创建节点并操纵属性的组件。 对于元素的子元素,还有其他注意事项,等等。

可以在聚合物内部使用React吗?

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

为什么?

Polymer(基于Web组件)和React(UI组件库)都基于“组件”。 由于没有单一的方式可以在Web中表达组件,因此您需要在各种库之间架起桥梁。 对于有关“在角上进行反应”,“在react中使用jquery插件”,“在jquery插件中进行敲除”,“在主干中进行反应”,“与使用主干的聚合物元素成角并与使用成角度的聚合物元素起反应”的问题也是如此。 等

在诸如与聚合物形成角度的情况下,您可能会认为这很简单,但是聚合物不知道如何评估角度表达式或任何类型的声明性回调。 在几乎每种情况下,您都需要一座桥梁,而桥梁从来都不是那么漂亮。

Brigand answered 2020-08-02T18:38:35Z
7 votes

这是一个相当老的问题,但是[https://www.npmjs.com/package/react-polymer]呢? 这不是聚合物成分反应的支持吗?

import reactPolymer from 'react-polymer'; //IMPORTANT: Must be imported before React.
import React from 'react';

reactPolymer.registerAttribute('raised');
reactPolymer.registerAttribute('url');
reactPolymer.registerEvent('response', 'onResponse');


<paper-button raised>another button</paper-button>
<iron-ajax url="http://example.com/" onResponse={this.handleResponse} />
tbo answered 2020-08-02T18:38:56Z
3 votes

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

自从这个问题问了一段时间以来,此后发生了很多变化,我想补充一点,您现在可以直接在react中使用聚合物元素,但是对于您的自定义属性和事件,它可以通过使用react轻松解决问题 -polymer,它支持几乎所有元素,但gold-*元素除外。

为什么要与Polymer一起使用React?

  1. 它可以进一步简化您的开发过程或使其变得一团糟。 这取决于你如何使用它
  2. 聚合物组件具有无与伦比的开发速度和易用性。
  3. React可以进一步将包含聚合物成分的成分分解为可管理的片段。
  4. 仅仅因为,反应和JSX就是爱。
  5. 嘿,为什么不呢?
Syed Huzaifa Hassan answered 2020-08-02T18:39:47Z
1 votes

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

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

MKant answered 2020-08-02T18:40:12Z
-1 votes

我今天刚刚尝试过此方法,因此能够成功地使用其元素目录中的材料元素。 我还没有进行全面的测试,但是就React中使用的标签而言,它可以正常工作,并且所有的html和CSS都在那里。

要使用现有元素,只需遵循其使用元素指南即可。

Sagar Desai answered 2020-08-02T18:40:37Z
translate from https://stackoverflow.com:/questions/26365545/is-it-possible-to-use-polymer-inside-of-react