目标
在我看来,创建一个几乎完美的框架,我想将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类名之间的关系?
1 回答
您必须在aurelia视图模型的attached()方法中执行此操作 .
正确答案是 "there is no case"
标记和属性名称在HTML中不区分大小写 .
Aurelia是基于标准的 .
这个需要一些教学 . 你可以看看Aurelia如何处理源代码中的命名约定https://github.com/aurelia/templating/blob/master/src/html-behavior.js