Javascript Aurelia中第三方库的依赖注入（di）范例

我尝试使用React创建Aurelia自定义元素，方法是在上执行此示例，并发生以下异常：

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

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

test.html

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

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

myelement.html

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

<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();
  }
}

从'aurelia framework'导入{Behavior}；
从“aurelia框架”导入{React}；
导出类MyElement{
静态元数据（）{
返回行为
.customElement（“我的元素”）
.withProperty（“foo”）
.noView（）；
}
静态注入（）{
返回[元素]；
}
构造函数（元素）{
this.element=元素；
log（'this:'，this）；
log（'element:'，element）；
}
绑定（）{
//React.render（，this.element）；
render（React.createElement（MyReactElement，{foo:this.foo}），this.element）；
}
食物变化（）{
这个。bind（）；
}
}

导入第三方库的诀窍在于，您必须选择访问该库的方式。在您的情况下，如果您试图使用react创建一个单独的自定义元素，并将视图和视图模型组合在一起，您可以这样简单地执行操作-

jspm安装react

然后在视图模型中-

从“react”导入react

然后可以在视图模型中的任何位置使用它，例如-

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

---

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

我可以想象从“aurelia framework”导入{React}实际上应该是：

从'React'导入{React}对，
从“React”导入React
解决问题的方法是什么？是的，谢谢。阅读我认为是内部使用的博客，并非如此。