Aurelia 中带有 3rd 方库的依赖注入 (di) 范例答案

【问题标题】：The dependency injection (di) paradigm with 3rd party libraries in AureliaAurelia 中带有 3rd 方库的依赖注入 (di) 范例
【发布时间】：2015-04-25 00:08:30
【问题描述】：

我正在尝试使用 React 创建 Aurelia 自定义元素，通过在 Aurelia Q & A 上遵循此示例并发生以下异常：

Potentially unhandled rejection [1] TypeError: Cannot read property 'render' of undefined

我做错了什么？这是我的测试代码：

test.html

<import from="./myelement"></import>
<my-element foo.bind="Value"></my-element>

myelement.html

<template>
  <input type="text" placeholder="user">
</template>

myelement.js

import {Behavior} from 'aurelia-framework';
import {React} from 'aurelia-framework';

export class MyElement {
  static metadata(){
    return Behavior
      .customElement('my-element')
      .withProperty('foo')
      .noView();
  }

  static inject() {
    return [Element];
  }

  constructor(element) {
    this.element = element;
    console.log('this:', this);
    console.log('element:', element);
  }

  bind() {
    // React.render(<MyReactElement foo={this.foo} />, this.element);
    React.render(React.createElement(MyReactElement, { foo: this.foo }), this.element);
  }

  fooChanged() {
    this.bind();
  }
}

【问题讨论】：

我想import {React} from 'aurelia-framework'; 实际上应该是：import {React} from 'react';
对，import React from 'react' 其实
问题解决了吗？
好的，谢谢。阅读我认为 react 内部使用的博客，不是这种情况。

标签： javascript reactjs ecmascript-6 aurelia

【解决方案1】：

导入第三方库的诀窍是您必须选择访问该库的方式。在您的情况下，如果您尝试使用结合了视图和视图模型的反应创建单个自定义元素，您可以像这样简单地这样做 -

jspm install react

然后在您的视图模型中 -

import react from 'react'

然后你可以在你的视图模型中的任何地方使用它，比如——

attached(element){
  // React pseudo-code
  react.render(element);
}

如果您选择通过依赖注入加载库，以便在您有更多选择的任何地方作为模块使用，但我认为这应该给您一个开始。

【讨论】：