超过了最大调用堆栈大小.递归标签

Maximum call stack size exceeded. recursive tags

本文关键字：递归 标签 堆栈 调用 过了      更新时间：2023-09-26

我的对象看起来像这样：

<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中递归标记是一个问题，但没有找到任何解决方案，或者说它不可能。

我在这里扩展了@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>
相关文章：