我们可以将 React 组件集成到 Aurelia 项目中吗？

Question

我已经创建了一个反应组件并使用 webpack 构建它并部署在服务器上。我想将此组件集成到 Aurelia 项目中。

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

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

但是我的 React 组件正在使用以下代码加载到 html 标记中的根目录中：

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

并且在运行 webpack 模块之后，它正在创建一个名为 index_bundle.js 文件的 JavaScript 文件。这里导入的App模块是主要的js组件。它通过 ReactDOM 在根元素上呈现 index.html。

所以我不确定，我将如何将 React 组件 link 或 url 集成到 Aurelia 应用程序中？

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

提前致谢。哈里什

Answer 1

是的，将 React 组件集成到 Aurelia 应用程序中真的很容易。在这里查看我的项目：https://github.com/ashleygrant/aurelia-loves-react

我什至没有使用你提到的加载程序插件。

以下是将第三方 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 项目的自定义 React 组件时的操作方法：

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

我们可以将 React 组件集成到 Aurelia 项目中吗？

Can we integrate react component into Aurelia project?

reactjs

aurelia