首页 文章

我们可以将反应组件整合到Aurelia项目中吗?

提问于
浏览 536
4

我创建了一个react组件并使用webpack构建它并部署在服务器上 . 我想将这个组件集成到Aurelia项目中 .

我尝试使用下面的npm模块:https://www.npmjs.com/package/aurelia-react-loader

在上面提到的模块中,组件名称需要传入html文件 . 比如示例 my-react-component.js 正在传递到html文件中 .

但我的React组件使用下面的代码加载到html标签中的root:

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

并且在运行webpack模块之后,它正在创建一个名为 index_bundle.js file的JavaScript文件 . 这里导入的 App 模块是主要的js组件 . 它通过ReactDOM渲染到根元素的index.html中 .

所以我不确定,我如何将React组件链接或url集成到Aurelia应用程序中?

如果您有任何疑问,请告诉我 . 我可以做详细解释 .

提前致谢 . 哈里什

1 回答

  • 9

    是的,将反应组件集成到Aurelia应用程序中非常容易 . 看看我的项目,我在这里做的就是:https://github.com/ashleygrant/aurelia-loves-react

    我甚至没有使用你提到的加载器插件 .

    以下是如何在Aurelia自定义元素中包装第三方反应组件:

    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
        );
      }*/
    }
    

    以下是使用属于Aurelia项目的自定义反应组件时如何执行此操作:

    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”的方式工作 .

相关问题