Polymer — это библиотека веб-компонентов, которую можно интегрировать в React-приложения. Хотя современные React-приложения обычно используют встроенные React-компоненты, интеграция элементов Polymer требует следования определённому порядку действий.
Определи свой Polymer-компонент, используя синтаксис библиотеки Polymer:
<link rel='import' href='../../bower_components/polymer/polymer.html' />
<dom-module id='calendar-element'>
<template>
<p>I am a calendar</p>
</template>
<script>
Polymer({
is: 'calendar-element',
ready: function() {
this.textContent = 'I am a calendar'
}
});
</script>
</dom-module>
Добавь импорт Polymer-компонента в файл index.html:
<link rel='import' href='./src/polymer-components/calendar-element.html'>
Это гарантирует, что Polymer-элемент доступен в HTML-контексте твоего React-приложения.
Импортируй React и обращайся к Polymer-элементу как к кастомному HTML-тегу в своём JSX:
import React from 'react'
class MyComponent extends React.Component {
render() {
return (
<calendar-element />
)
}
}
export default MyComponent
<link> с импортом загружен до инициализации твоего React-приложенияPolymer компоненты должны импортироваться в React приложения через index.html с использованием <link rel='import'> тегов, а не JavaScript import statements, чтобы они были доступны в HTML контексте до инициализации React.
Новый — ещё не проверен сообществом
Вы