React 내부에 Polymer를 사용할 수 있습니까?

React 내부에 Polymer를 사용할 수 있습니까?

저는 React를 사용하고 있으며, React 내부에 Polymer 태그를 사용하고 있습니다.React는 기본 DOM 태그만 처리하므로 React는 폴리머 태그를 인식하지 않습니다.React DOM 라이브러리에 폴리머 태그를 추가하는 방법이 있습니까?

네, 가능합니다.

1. 폴리머 요소를 만듭니다.

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

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

2. 폴리머 컴포넌트를 html 페이지에 Import하여 html 태그로 만듭니다.예를 들어 리액트 애플리케이션의 index.html로 Import합니다.

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

React 내부에 Polymer를 사용할 수 있습니까?

단답: 그렇지 않습니다.

긴 답변: 약간.노드를 직접 작성하고 속성을 조작하는 컴포넌트를 작성해야 합니다.요소 자녀 등에 대한 기타 고려사항도 있다.

React in the Polymer를 사용할 수 있습니까?

이 방법은 거의 동일합니다. 즉, React 성분을 폴리머 원소로 감싸야 합니다.

왜요?

폴리머(웹 컴포넌트 기반)와 리액트(UI 컴포넌트 라이브러리)는 모두 '컴포넌트'를 기반으로 합니다.웹에서는 컴포넌트를 표현하는 단일 방법이 없기 때문에 다양한 라이브러리 간에 브리징을 수행해야 합니다.'각진 상태에서 반응', 'jquery plugin in react', 'jquery plugin에서 녹아웃', 'backbone에서 반응', 'backbone을 사용하는 고분자 원소와 각진 상태에서 반응하는 고분자 원소와의 각도' 등에 대한 질문도 마찬가지입니다.

폴리머를 사용한 각도 같은 경우에는 매우 간단하다고 생각할 수 있지만 폴리머는 각도 표현이나 선언적 콜백의 평가에 대해 알지 못합니다.거의 모든 경우에 다리가 필요하지만, 그것들은 결코 예쁘지 않습니다.

이것은 꽤 오래된 질문이지만, 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} />

반응 및 폴리머의 현재 단계에 따라 응답

이 질문은 조금 전에 질문되었고 그 이후로 많은 변화가 있었으므로, 이제는 직접 반응에서 폴리머 요소를 사용할 수 있지만, 사용자 지정 특성 및 이벤트에 대해 리액트 폴리머를 사용하여 쉽게 처리할 수 있다는 점을 추가하고 싶습니다. 이 질문은 리액트 폴리머를 제외하고 거의 모든 요소를 지원합니다.gold-*요소들.

반응과 함께 폴리머를 사용하려는 이유는 무엇입니까?

1. 개발 프로세스를 더욱 심플화하거나 큰 혼란을 초래할 수 있습니다.어떻게 쓰느냐에 따라 다릅니다.
2. 폴리머 성분이 제공하는 현상 속도와 사용 편의성은 타의 추종을 불허합니다.
3. React는 폴리머 구성 요소로 구성된 구성 요소를 관리하기 쉬운 조각으로 분해할 수 있습니다.
4. 그냥 리액션하고 JSX가 사랑이기 때문에.
5. 왜 안 돼?

정답은 '그렇다'입니다.하지만 그것은 간단하지 않다.그래서 저는 실제로 공식 문서에도 있는 몇 가지 문서를 따라 해봤지만, 가장 좋았던 것은 https://medium.com/jens-jansson/start-using-web-components-in-react-6ccca2ca21f9이었습니다.

언급된 단계를 따라 했더니 효과가 있었어요!또한 저는 Vaadin Datepicker와 Polymer Element paper-input 중 하나를 통합하려고 했던 github repo에 대해서도 언급하고 있습니다.https://github.com/manit815/react-with-webcomponent

네, 안에 있는 폴리머 원소를 반응시켜도 됩니다.

1. 폴리머 요소 생성

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

2. 를 사용하여 요소를 HTML 파일로 Import합니다.<script type="module">import 스테이트먼트(상기 참조)를 사용하여 다른 ES6 모듈에서 Import합니다.

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

3. 가져온 후에는 표준 요소를 사용하는 것과 마찬가지로 사용자 지정 요소를 사용할 수 있습니다.

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

저는 오늘 이것을 시도했는데, 그들의 요소 카탈로그에 있는 재료 요소를 성공적으로 사용할 수 있었습니다.아직 충분히 테스트해 본 적은 없지만, React의 태그를 사용하면 동작하고 html과 css는 모두 사용할 수 있습니다.

기존 요소를 사용하려면 요소 사용 안내서에 따르십시오.

언급URL : https://stackoverflow.com/questions/26365545/is-it-possible-to-use-polymer-inside-of-react