我們可以將反應組件整合到Aurelia項目中嗎？

Question

我創建了一個反應組件，並使用webpack構建它並部署在服務器上。我想將這個組件集成到Aurelia項目中。

我嘗試使用以下NPM模塊： https://www.npmjs.com/package/aurelia-react-loader

在上面提到的模塊，組件名稱需要通入的HTML文件。如示例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')); 

和運行的WebPack模塊後，它正在創建一個JavaScript文件被稱爲index_bundle.js文件。這裏輸入App模塊是主要的js組件。它通過ReactDOM渲染到根元素的index.html中。

所以我不確定，我將如何將React組件鏈接或URL集成到Aurelia應用程序中？

如果您有任何疑問，請讓我知道。我可以詳細解釋。

在此先感謝。 Harish

Answer 1

是的，將反應組件集成到Aurelia應用程序非常簡單。看看我的項目，我只是在這裏：https://github.com/ashleygrant/aurelia-loves-react

我甚至沒有使用你提到的loader插件。

下面是如何包裝第三方在奧裏利亞定製元素反應成分：

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」的方式工作。