目标

Question

目标

创建，我认为是一个几乎完美的框架，我想将Aurelia与ReactJS结合使用（主要是创建可在Aurelia中使用的组件）。

要实现这一目标，有几种选择（请参阅http://ilikekillnerds.com/2015/03/how-to-use-react-js-in-aurelia/和https://github.com/bryanrsmith/aurelia-react-loader）

第一个选项的缺点是组件包含在自定义元素中，我不想对我计划创建的所有元素执行此操作。第二个选项非常好，不是组件是从组件实例（而不是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配置为不将元素名称转换为小写？

正确的答案是＆＃34;没有案例＆＃34;
标记和属性名称在HTML中不区分大小写 Aurelia是基于标准的。

ReactJS是否可以看到以kebab-case编写的html元素与javascript类名之间的关系？

这个需要一些教学。您可以查看Aurelia如何处理源代码中的命名约定 https://github.com/aurelia/templating/blob/master/src/html-behavior.js

Answer 2

aurelia的附加方法不会等到完整的DOM准备好，如果我们在attached里面做任何DOM操作都会失败..

使用ReactJS在Aurelia中呈现组件

目标

已完成工作

问题

2 个答案: