Maximale Größe des Anrufspeichers überschritten. rekursive Tags

Question

Mein Objekt sieht wie folgt aus:

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

Jedes Kind seine eigenen Kinder haben. Also brauche ich Rekursionstag hier. Es ist was ich habe:

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

Ich bekomme Maximum call stack size exceeded. Ich lese, dass in einem Riot js Rekursion Tags ein Problem ist, aber keine Lösung gefunden hat, oder dass es nicht sein kann.

Answer 1

Ich habe hier @ Heikkis Beispiel erweitert: http://plnkr.co/edit/12AyPoahb9vGOvx06qqv?p=preview

Die Daten, die ein wenig anders strukturiert:

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

Mit dem aktualisierten Kind tag:

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