web-dev-qa-db-fra.com

Est-il possible d'utiliser Polymer dans React?

J'utilise React et je cherche à utiliser des étiquettes en polymère à l'intérieur de React. React ne reconnaît pas les balises Polymer, car React ne gère que les balises DOM de base. Est-il possible d'ajouter les balises Polymer à la bibliothèque React DOM?

htmlpolymerreactjs
39
Vu Dang

Oui c'est possible.

  1. Créez un élément polymère.

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

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

  2. Faites du composant polymère une balise HTML en l’important dans une page HTML. Par exemple. importez-le dans le fichier index.html de votre application de réaction. 

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

  3. Utilisez cet élément dans le fichier jsx.

    'use strict';

import React from 'react';

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

export default MyComponent;
49
Sanjeev

Est-il possible d'utiliser Polymer dans React?

Réponse courte: pas vraiment.

Réponse longue: un peu. Vous devez créer des composants qui créent directement les nœuds et manipulent les attributs. Il y a aussi d'autres considérations pour les enfants de l'élément, etc.

Est-il possible d'utiliser React dans Polymer?

C'est à peu près la même réponse de cette façon, vous devriez envelopper un composant React dans un élément polymère.

Pourquoi?

Polymer (basé sur des composants Web) et React (une bibliothèque de composants ui) sont tous deux basés sur des «composants». Comme il n’existe pas de moyen unique d’exprimer un composant sur le Web, vous devez établir un lien entre les différentes bibliothèques. Il en va de même pour les questions "Réagir dans un angle", "JQuery Plugin in Rea", "Désactiver dans un jQuery Plugin", "Réagir dans le squelette", "Angle avec des éléments polymères utilisant l’ossature et réagissant avec des angulaire ', etc.

Dans un cas comme angular with polymer, vous pourriez penser que c'est très simple, mais le polymère ne sait pas comment évaluer les expressions angulaires, ni aucun type de rappel déclaratif. Vous avez besoin d'un pont dans presque tous les cas, et ils ne sont jamais beaux.

8
FakeRainBrigand

c'est une question assez ancienne, mais que dire de https://www.npmjs.com/package/react-polymer ? N'est-ce pas un support de composants polymères pour réagir?

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} />
7
tbo

Réponse en fonction des étapes actuelles de réaction et de polymère

Depuis que cette question a été posée il y a un certain temps et que beaucoup de choses ont changé depuis, j'aimerais ajouter que vous pouvez maintenant utiliser des éléments polymères dans Reaction directement, mais que pour vos attributs et événements personnalisés, le problème peut être facilement résolu en utilisant react-polymer , Il supporte presque tous les éléments, à l'exception des éléments gold-*. 

Pourquoi voudriez-vous utiliser Polymer avec react?

  1. Cela peut simplifier davantage votre processus de développement ou en faire un véritable gâchis. Cela dépend de la façon dont vous l'utilisez
  2. La rapidité de développement et la facilité d'utilisation offertes par les composants polymères sont inégalées. 
  3. React peut encore décomposer vos composants constitués de composants polymères, en morceaux gérables.
  4. Tout simplement parce que, réagis et JSX est amour.
  5. Hey pourquoi diable pas ?? 
3
Syed Huzaifa Hassan

La réponse est OUI. Mais ce n'est pas simple. Donc, j'ai essayé de suivre quelques documentations qui sont en fait même les plus officielles mais le meilleur était celui-ci: https://medium.com/jens-jansson/start-using-web-components-in-react-6ccca2ca21f9

J'ai suivi les étapes mentionnées et cela a fonctionné! Je mentionne également le github repo dans lequel j'ai essayé d'intégrer le vaadin datepicker ainsi que l'un des éléments de papier à entrée en polymère. https://github.com/manit815/react-with-webcomponent

1
MKant