在使用 haxe-react 时它呈现字符串而不是组件？

Question

我正在尝试使用 Haxe 和 haxe-react 呈现列表组件。但它将 '' 呈现为 HTML 中的字符串！任何方向。这是它的代码。

  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>');
}

虽然它编译得很好。谢谢

Answer 1

正如问题作者所想，原因是 jsx 宏不处理 String 所以你不能使用连接来构建它：宏在编译时转换参数jsx('JSX expression') 转化为 React Elements。

构建 React 元素列表的正确方法是构建一个 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：注意添加的 key 属性，为 ReactElements 数组中的元素指定键很重要。

在使用 haxe-react 时它呈现字符串而不是组件？

While using haxe-react it renders String instead of Component?

javascript

reactjs

react-jsx

haxe