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

My object looks like this:

我的对象看起来像这样:

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

Each child can have its own children. So I need recursion tag here. It is what I have:

每个孩子都可以拥有自己的孩子。所以我需要这里的递归标记。这就是我所拥有的:

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

I get Maximum call stack size exceeded. I read that in a riot js recursion tags is a problem, but did not find any solution, or that it can not be.

我超过了最大调用堆栈大小。我读到,在一个*的js递归标签是一个问题,但没有找到任何解决方案,或它不能。

1 个解决方案

#1

I've extended @Heikki's example here: http://plnkr.co/edit/12AyPoahb9vGOvx06qqv?p=preview

我在这里扩展了@Heikki的例子:http://plnkr.co/edit/12AyPoahb9vGOvx06qqv?p = preview

The data is structured a little differently:

数据结构略有不同:

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

With the updated child tag:

使用更新的子标记:

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

#1