web-dev-qa-db-ja.com

React内でPolymerを使用できますか？

私はReactを使用していますが、React内でPolymerタグを使用するように見えます。 ReactはPolymerタグを認識しません。Reactは基本的なDOMタグのみを処理します。 PolymerタグをReact DOMライブラリに追加する方法はありますか？

htmlpolymerreactjs
43
Vu Dang

はい、可能です。

  1. polymer要素を作成します。

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

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

  2. polymerコンポーネントをhtmlページにインポートしてhtmlタグにします。たとえば、reactアプリケーションのindex.htmlにインポートします。

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

  3. Jsxファイルでその要素を使用します。

    'use strict';

import React from 'react';

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

export default MyComponent;
52
Sanjeev

React内でPolymerを使用できますか？

簡単な答え：そうでもない。

長い答え：ちょっと。ノードを直接作成し、属性を操作するコンポーネントを作成する必要があります。要素の子などについては、他にも考慮事項があります。

Polymer内でReactを使用できますか？

この方法はほぼ同じ答えです。Reactコンポーネントをpolymer要素でラップする必要があります。

どうして？

Polymer（Webコンポーネントに基づく）、およびReact（UIコンポーネントライブラリ））は両方とも「コンポーネント」に基づいています。Webでコンポーネントを表現する方法は1つではないため、さまざまなライブラリ間を橋渡しします。「角度で反応する」、「反応するjqueryプラグイン」、「jqueryプラグインでノックアウトする」、「バックボーンで反応する」、「polymerバックボーンを使用し、polymerアンギュラーを使用する要素 'などの要素.

angularのような場合、非常に簡単だと思うかもしれませんが、polymerはangular =式、またはあらゆる種類の宣言的コールバックほぼすべての場合にブリッジが必要ですが、それらは決してきれいではありません。

9
Brigand

これはかなり古い質問ですが、どうですか https://www.npmjs.com/package/react-polymer ？これはpolymer reactのコンポーネントのサポートではありませんか？

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

反応とポリマーの現在の段階に応じた回答

この質問は少し前に尋ねられ、それ以来多くの変更が加えられているので、今すぐpolymer elementsを直接反応するが、それが引き起こすカスタム属性とイベントのために使用できることを付け加えたい react-polymer を使用して簡単に処理できる問題。gold-*要素を除くほとんどすべての要素をサポートします。

なぜPolymerをreactと共に使用したいのですか？

  1. 開発プロセスをさらに簡素化することも、混乱を招くこともあります。使い方次第です
  2. polymerコンポーネントが提供する開発のスピードと使いやすさは他の追随を許しません。
  3. Reactは、polymerコンポーネントで構成されるコンポーネントを、管理しやすい部分にさらに分割できます。
  4. 単に、反応し、JSXは愛だからです。
  5. どうして地獄じゃないの？
3
Syed Huzaifa Hassan

答えは[〜＃〜] yes [〜＃〜]です。しかし、それは簡単ではありません。だから、私は実際に公式のものでさえあるいくつかのドキュメントに従ってみましたが、これは最高でした： https://medium.com/jens-jansson/start-using-web-components-in-react- 6ccca2ca21f9

記載されている手順に従ったところ、うまくいきました！また、vaadin datepickerとpolymer element paper-input。の1つを統合しようとしたgithubリポジトリについても言及しています。 https://github.com/manit815/react -with-webcomponent

1
MKant