我一直在使用 React，并希望在 React 中使用 Polymer 标签。 React 不识别 Polymer 标签，因为 React 只处理基本的 DOM 标签。有没有办法将 Polymer 标签添加到 React DOM 库？
【问题讨论】：
是的，有可能。
创建一个聚合物元素。
<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;
【讨论】：
简短的回答：不是。
长答案：有点。您必须创建直接创建节点和操作属性的组件。元素的子元素等还有其他注意事项。
这种方式的答案几乎相同，您必须将 React 组件包装在聚合物元素中。
Polymer（基于 Web 组件）和 React（一个 ui 组件库）都基于“组件”。因为没有单一的方法可以在 Web 中表达组件，所以您需要在各种库之间架起一座桥梁。这同样适用于有关“角度反应”、“反应中的 jquery 插件”、“jquery 插件中的淘汰赛”、“主干中反应”、“角度与聚合物元素的问题，这些聚合物元素使用主干并与聚合物元素反应使用 angular' 等。
在 Angular 和 Polymer 的情况下，您可能认为它非常简单，但 Polymer 不知道评估 Angular 表达式或任何类型的声明性回调。几乎在所有情况下你都需要一座桥梁，但它们从来都不漂亮。
【讨论】：
这是一个相当古老的问题，但是 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} />
【讨论】：
由于这个问题是不久前提出的，并且从那时起发生了很多变化，我想补充一点，您现在可以直接使用聚合物元素进行反应，但是对于您的自定义属性和事件，它会导致问题，很容易处理通过使用react-polymer，它几乎支持所有元素，除了gold-*元素。
【讨论】：
答案是是。但这不是直截了当的。因此，我尝试遵循一些文档，这些文档实际上甚至是官方文档，但最好的是：https://medium.com/jens-jansson/start-using-web-components-in-react-6ccca2ca21f9
我按照上面提到的步骤进行了操作，并且成功了！我还提到了 github 存储库，其中我尝试集成 vaadin 日期选择器以及聚合物元素纸张输入之一。 https://github.com/manit815/react-with-webcomponent
【讨论】：
是的，你可以在 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 />
)
}
【讨论】：
我今天刚刚尝试过，我能够成功地使用他们元素目录中的材料元素。我还没有完全测试它，但就在 React 中使用标签而言，它可以工作，所有的 html 和 css 都在那里。
要使用现有元素，只需关注他们的using elements guide.
【讨论】：