Goal
Per creare, ciò che è a mio parere, un quadro quasi perfetto voglio usare Aurelia in combinazione con ReactJS (componenti principalmente solo creando che possono essere utilizzati all'interno di Aurelia).Utilizzando ReactJS a rendere componenti all'interno Aurelia
Per raggiungere questo obiettivo ci sono diverse opzioni (Vedi http://ilikekillnerds.com/2015/03/how-to-use-react-js-in-aurelia/ e https://github.com/bryanrsmith/aurelia-react-loader)
La prima opzione ha lo svantaggio che il componente è avvolto all'interno di un elemento personalizzato, che io non voglio fare per tutti gli elementi che ho intenzione sulla creazione. La seconda opzione è piuttosto carina, non è vero che il componente è generato da un'istanza del componente (invece del markup html).
lavoro già svolto
La cosa che ho cercato di fare ora è quello di creare un attributo personalizzato che fa ReactJS rendono l'innerHTML dell'elemento specifica.
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);
}
}
Se la soluzione sopra funzionasse sarei assolutamente felice. Ma, come Aurelia vuole rispettare gli standard web, mette tutti i nomi degli elementi in minuscolo. (this.element.innerHTML restituisce <myreactcomponent><h2>lol</h2><h2>lol</h2></myreactcomponent>) In questo modo ReactJS non può eseguire il rendering dei componenti.
Il pezzo che ho commentato nello snippet di codice sopra funziona davvero.
Domande
- Come posso ottenere ReactJS per rendere correttamente questi componenti?
- E 'possibile configurare Aurelia per non trasformare i nomi degli elementi in lettere minuscole?
- E 'possibile per ReactJS vedere la relazione tra gli elementi HTML scritti in nomi di classi kebab-case e javascript?
Ciao, hai fatto un compito? e sto lavorando aurelia - reagisci, guarda reagire modello è aurelia, qui ho una funzione click nella mia vista (reagisci) ** onClick = {this.myfun} ** mentre cliccandoci devi portarla ad aurelia dove si trova myfun. qualche idea. – sibi