使用ReactJS在Aurelia中呈现组件

Question

目标

在我看来,创建一个几乎完美的框架,我想将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);
    }
}

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

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

问题

• 如何让ReactJS正确呈现这些组件？
  • 是否可以将Aurelia配置为不将元素名称转换为小写？
  • ReactJS有可能看到用kebab-case编写的html元素和javascript类名之间的关系吗？

Answer 1

如何让 ReactJS 正确渲染这些组件？

您必须在 aurelia 视图模型的attached() 方法中执行此操作。

是否可以将 Aurelia 配置为不将元素名称转换为小写？

正确答案是“不区分大小写”
HTML 中的标记和属性名称不区分大小写。
Aurelia 是基于标准的。

ReactJS是否可以看到以短横线形式编写的html元素和javascript类名之间的关系？

这需要一些教导。您可以在源代码中查看 Aurelia 如何对待命名约定 https://github.com/aurelia/templated/blob/master/src/html-behavior.js