使用ReactJS在Aurelia中呈现组件

目标

在我看来,创建一个几乎完美的框架,我想将Aurelia与ReactJS结合使用(主要是创建可在Aurelia中使用的组件).

要实现这一目标,有几种选择(参见http://ilikekillnerds.com/2015/03/how-to-use-react-js-in-aurelia/和https://github.com/bryanrsmith/aurelia-react-装载机)

第一个选项的缺点是组件包含在自定义元素中,我不想对我计划创建的所有元素执行此操作.第二个选项非常好,不是组件是从组件实例(而不是html标记)生成的.

工作已经完成

我现在要做的就是创建一个自定义属性,使ReactJS呈现特定元素的innerHTML.

import { customAttribute, inject } from 'aurelia-framework';
import React from 'react';
import ReactDOM from 'react-dom';

// ToDo: have one file to import all dependent components
import { MyReactComponent } from 'components/my-react-component';

@inject(Element)
@customAttribute('react-content')
export default class ReactCustomAttribute {
    constructor (element) {
        console.log(element.innerHTML);
        this.element = element;
        ReactDOM.render(
            <div dangerouslySetInnerHTML={{__html: this.element.innerHTML}}></div>, 
            this.element);
        // ReactDOM.render(
        //     <MyReactComponent><h2>lol</h2><h2>lol</h2></MyReactComponent>, 
        //     this.element);
    }
}

Run Code Online (Sandbox Code Playgroud)

如果上述解决方案能够奏效,我将非常高兴.但是,由于Aurelia希望遵守Web标准,因此它将所有元素名称都设置为小写.(this.element.innerHTML返回<myreactcomponent><h2>lol</h2><h2>lol</h2></myreactcomponent>)这样ReactJS无法呈现组件.

我在上面的代码片段中注释掉的那篇文章实际上是有效的.