javascript - 最大呼び出しスタック サイズを超えました。再帰タグ

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

ここで @Heikki の例を拡張しました: 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>