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。我在一个 riot 中读到 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>