When using haxe-responsive to String instead of Component?
I am trying to render a list component using Haxe and haxe-react. But it displays "as a string in HTML"! Any guidance. Here is the code for it.
override public function render(){
var sList:String = this.getListString();
return jsx('
<div style={{margin:"10px", border:"black 2px solid"}}>
${ sList }
</div>
');
}
private function getListString():String{
var result:String = '';
for (i in 0 ... 10) {
result += ('<div>'+i+'</div>');
}
return ('<div style={{margin:"10px", border:"black 2px solid"}}>'+result+'</div>');
}
While it is compiling. Thank.
source to share
The reason, according to the author of the question, is that the macro jsx
does not process String
, so you cannot build it using concatenation: the macro converts the parameter jsx('JSX expression')
to React Elements at compile time .
The correct way to create a list of React Elements is to build Array<ReactElement>
:
private function getList() {
var result = [];
for (i in 0 ... 10) {
result.push( jsx('<div key=$i>$i</div>') );
}
return jsx('<div style={{margin:"10px", border:"black 2px solid"}}>$result</div>');
}
PS: notice the added attribute key
, it is important to specify the key for the elements in the ReactElements array.
source to share