是否可以在 React 中使用 Polymer？

Posted 2023-03-05

【中文标题】是否可以在 React 中使用 Polymer？

【英文标题】：Is it possible to use Polymer inside of React?

【发布时间】：2014-12-09 12:38:07

【问题描述】：

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

【问题讨论】：

肯定有人在 React 中探索 Web 组件（如 Polymer）。偶然发现2015.jsday.it/talk/… - 请参阅幻灯片 ~2/3 in，标题为“解决方案：自定义反应类”。那里没有代码，但列出了基本方法。

另见github.com/facebook/react/issues/2746

Vu Dang，也许考虑接受更新的答案？又名 - @FakeRainBrigand 的回答

【参考方案1】：

是的，有可能。

创建一个聚合物元素。

<link rel="import" href="../../bower_components/polymer/polymer.html">

Polymer(
    is: 'calender-element',
    ready: function()
        this.textContent = "I am a calender";
    
);

通过将聚合物组件导入到 html 页面中，使其成为 html 标记。例如。将其导入您的反应应用程序的 index.html 中。

<link rel="import" href="./src/polymer-components/calender-element.html">

在 jsx 文件中使用该元素。

'use strict';

import React from 'react';

class MyComponent extends React.Component
    render()
        return (
            <calender-element></calender-element>
        );
    


export default MyComponent;

【讨论】：

这是一个更好的答案。 OP 正在寻找在 React 组件中使用 Polymer 标签的能力。这是一个不这样做的明显示例。

【参考方案2】：

是否可以在 React 中使用 Polymer？

简短的回答：不是。

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

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

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

为什么？

Polymer（基于 Web 组件）和 React（一个 ui 组件库）都基于“组件”。因为没有单一的方法可以在 Web 中表达组件，所以您需要在各种库之间架起一座桥梁。这同样适用于有关“角度反应”、“反应中的 jquery 插件”、“jquery 插件中的淘汰赛”、“主干中反应”、“角度与聚合物元素的问题，这些聚合物元素使用主干并与聚合物元素反应使用 angular' 等。

在 Angular 和 Polymer 的情况下，您可能认为它非常简单，但 Polymer 不知道评估 Angular 表达式或任何类型的声明性回调。几乎在所有情况下你都需要一座桥梁，但它们从来都不漂亮。

【讨论】：

“聚合物没有数据绑定的概念” - 这是一个错字吗？ Polymer 完全有数据绑定polymer-project.org/docs/polymer/databinding.html

WebComponents（即像在 Polymer 中一样）可以在 ReactJS 中处理，就像任何其他 HTML 元素一样。所以 React 和 Polymer 可以很好地协同工作。 Polymer 和 WebComponents 只是创建新 HTML 标签的一种标准化方式，但这些标签一旦定义，就会在浏览器级别被识别（尽管目前使用 polyfills），因此 WebComponents 可以与任何和所有 Web 框架完美共存。重复一遍，任何 WebComponent 都可以像原生 HTML 标记一样使用，并且可以执行任何其他 TAG 所做的任何事情。就浏览器代码而言，它确实是一个新标签。

【参考方案3】：

这是一个相当古老的问题，但是 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 />

【参考方案4】：

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

由于这个问题是不久前提出的，并且从那时起发生了很多变化，我想补充一点，您现在可以直接使用聚合物元素进行反应，但是对于您的自定义属性和事件，它会导致问题，很容易处理通过使用react-polymer，它几乎支持所有元素，除了gold-*元素。

为什么要在 react 中使用 Polymer？

它可以进一步简化您的开发过程或使其变得一团糟。这取决于你如何使用它 聚合物组件的开发速度和易用性无与伦比。 React 可以进一步将包含聚合物组件的组件分解为可管理的部分。 只是因为，react 和 JSX 就是爱。 嘿，为什么不呢？？

【参考方案5】：

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

我按照上面提到的步骤进行了操作，并且成功了！我还提到了 github 存储库，其中我尝试集成 vaadin 日期选择器以及聚合物元素纸张输入之一。 https://github.com/manit815/react-with-webcomponent

【讨论】：

在 JSX 内部，web-components 的 class 属性不知何故被忽略了。 @MKant 我已经打开了一个关于这个问题的问题github.com/manit815/react-with-webcomponent/issues/1。

【参考方案6】：

是的，你可以在 react 中使用 Polymer 元素。

创建聚合物元素

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

使用 <script type="module"> 将元素导入 HTML 文件。 使用 import 语句（如上所示）从另一个 ES6 模块导入它。

<script type="module" src="./polymer-button.js">

导入后，您可以像使用标准元素一样使用自定义元素。

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

【参考方案7】：

我今天刚刚尝试过，我能够成功地使用他们元素目录中的材料元素。我还没有完全测试它，但就在 React 中使用标签而言，它可以工作，所有的 html 和 css 都在那里。

要使用现有元素，只需关注他们的using elements guide.