Question

我有一个树数据结构，我需要递归地渲染它

const tree = [
  {
    name: 'hello',
    children: [
      {
        name: 'world',
        children: [
          {
            name: 'bye'
          }
        ]
      }
    ]
  }
];

问题在于此组件应该像表行一样位于表内部，因此不能彼此嵌套在DOM中

这是它的样子 https://jsfiddle.net/zw4mydxb/2/

这就是我需要的结果

<tr>hello</tr>
<tr>world</tr>
<tr>bye</tr>

是否有可能使用递归组件而不更改数据结构？

Answer 1

您可以为此使用递归，下面的代码段将为您提供帮助。

const tree = [
    {
      name: "hello",
      children: [
        {
          name: "world",
          children: [
            {
              name: "bye"
            }
          ]
        },
        {
          name: "hola"
        }
      ]
    },
    {
      name: "how",
      children: [
        {
          name: "is",
          children: [
            {
              name: "life"
            }
          ]
        }
      ]
    }
];

function getData(tree) {
    if (tree && typeof tree[0].children === "undefined") return tree[0].name;
    var outputString = [];
    for (let i = 0; i < tree.length; i++) {
        if (typeof tree[i].children != "undefined") {
          outputString.push(tree[i].name, getData(tree[i].children));
        } else {
          outputString.push(tree[i].name);
        }
    }

    return outputString.toString().split(",");
}
console.log(getData(tree));

现在您有了一个名称数组，可以迭代该数组。

如何在Vue.js的父组件之外呈现递归组件？

1 个答案: