超出最大调用堆栈大小。递归标签

Question

我的目标是这样的：

<app> 
    <child opts="{ json }"></child> 
    <script> 
    this.json = [ 
     { 
     text: 'parent', 
     child: [ 
      { 
      text: 'child1', 
      child: { 
       text: 'child2' 
      } 
      } 
     ] 
     } 
    ]; 
    </script> 
</app> 

每个孩子都可以拥有自己的孩子。所以我需要在这里递归标签。这是我有：

<child> 
<h1>child: { opts.opts.text }</h1> 
<div if={opts.opts.child}> 
    <child opts={opts.opts.child}></child> 
</div> 
</child> 

我得到Maximum call stack size exceeded。我在阅读中认识到，js递归标签是一个问题，但没有找到任何解决方案，或者它不能。

Answer 1

我已经扩展@科瓦莱宁的例子在这里：http://plnkr.co/edit/12AyPoahb9vGOvx06qqv?p=preview

的数据是结构化的方式略有不同：

this.json = { 
    text: 'parent', 
    children: [ 
    { 
     text: 'child1', 
     children: [{ 
     text: 'child2', 
     children: [ 
      {text: 'Inner', children: [ 
      { 
       text: 'Inner inner', 
       children: [] 
      }, 
      { 
       text: 'Inner inner 2', 
       children: [] 
      } 
      ]} 
     ] 
     }] 
    } 
    ] 
}; 

有了更新的子标签：

<child> 
    <h1>Text: { this.opts.data.text }</h1> 
    <virtual each={ child in this.opts.data.children }> 
    <child data="{ child }"></child> 
    </virtual> 
</child>