Aurelia 프로젝트에 반응 구성 요소를 통합 할 수 있습니까?

Question

하나의 반응 구성 요소를 생성하고 webpack을 사용하여 구축하고 서버에 배포했습니다. 이 구성 요소를 Aurelia Project에 통합하려고합니다. 위에서 언급 한 모듈 https://www.npmjs.com/package/aurelia-react-loader

, 부품 이름 HTML 파일에 전달할 필요 :

난 NPM 모듈 아래하여 시도. 예 : my-react-component.js이 html 파일로 전달됩니다.

는하지만 내는 구성 요소 코드 아래 사용하여 HTML 태그 루트에로드되는 반작용 :

import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import App from './App'; 
    ReactDOM.render((
     <App/> 
    ), document.getElementById('root')); 

및 웹팩 모듈을 실행 한 후

, 그것은 index_bundle.js 파일이라고 자바 스크립트 파일 하나를 만드는 것입니다. 여기에 수입 애플 리케이션 모듈은 기본 js 구성 요소입니다. ReactDOM을 통해 루트 요소에서 index.html로 렌더링됩니다.

확실하지 않습니다. 어떻게 반응 성분 링크 또는 URL을 Aurelia 응용 프로그램에 통합 할 예정입니까?

의심스러운 점이 있으면 알려주십시오. 나는 자세하게 설명 할 수있다.

미리 감사드립니다. Harish

Answer 1

그래, 반응 성분을 Aurelia 앱에 통합하는 것은 정말 쉽습니다. 여기에 나와있는 프로젝트를 확인하십시오 : https://github.com/ashleygrant/aurelia-loves-react

내가 언급 한 로더 플러그인을 사용하고 있지 않습니다.

다음은 타사가 아우렐 리아 사용자 정의 요소에 구성 요소를 반응 래핑하는 방법은 다음과 같습니다

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactDatePicker from 'react-datepicker'; 
import { noView, bindable, inject } from 'aurelia-framework'; 

@noView(['react-datepicker/react-datepicker.css']) 
@inject(Element) 
export class DatePicker { 
    @bindable selectedDate; 
    @bindable onChange; 

    constructor(element) { 
    this.element = element; 
    } 

    selectedDateChanged() { 
    this.render(); 
    } 

    render() { 
    ReactDOM.render(
     <ReactDatePicker 
     selected={this.selectedDate} 
     onChange={date => this.onChange({ date: date })} 
     />, 
     this.element 
    ); 
    } 

    // How to use native DOM events to pass the changed date 
    /*render() { 
    ReactDOM.render(
     <ReactDatePicker 
     selected={this.selectedDate} 
     onChange={date => { 
      let event = new CustomEvent('change', { 'detail': date }); 
      // Dispatch the event. 
      this.element.dispatchEvent(event); 
     } 
     } 
     />, 
     this.element 
    ); 
    }*/ 
} 

을 그리고 여기에 사용자 지정을 사용하는 동안 그것을 수행 아우렐 리아 프로젝트의 일부 구성 요소에 반응하는 방법은 다음과 같습니다

을

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { noView, bindable, inject } from 'aurelia-framework'; 
import FormattedDate from '../react-components/formatted-date'; 

@noView() 
@inject(Element) 
export class ReactDate { 
    @bindable date; 
    @bindable format = 'dddd, MMMM D, YYYY'; 

    constructor(element) { 
    this.element = element; 
    } 

    dateChanged() { 
    this.render(); 
    } 

    formatChanged() { 
    this.render(); 
    } 

    render() { 
    ReactDOM.render(
     <FormattedDate 
     date={this.date} 
     format={this.format} 
     />, 
     this.element 
    ); 
    } 
} 

자세히 알 수 있듯이 매우 간단합니다. 나는 더 많은 "Aurelia-ey"방식으로 작동하도록 각 속성에 대한 데이터 바인딩을 설정할 수 있으므로 로더를 사용하는 대신 손으로 작업하는 것을 좋아합니다.