通过带有键数组的树结构推送给孩子答案

【问题标题】：Push to a child through tree structure with an array of keys通过带有键数组的树结构推送给孩子
【发布时间】：2018-04-12 11:13:12
【问题描述】：

我正在使用React Tree 为我的应用构建树形结构。我想在每次扩展节点时执行服务器请求以加载所述节点的子节点。我正在使用 onExpand 属性来获取展开节点的 key。这很好用，但是当节点不在树的第一级时就会出现问题。

当节点不在第一级时，onExpand 属性返回一个 keys 数组，该数组遍历每个已打开的 key，直到到达该节点。我的问题是，在我从服务器获取子数据（待附加）后，我需要将其推送到扩展节点的子节点，并且我需要遍历树数据以对扩展节点进行推送。

例子：

这是构建树的数据：

const data = [
        {
          key: 1,
          title: 'one',
          children: [
            {
              key: 2,
              title: 'two',
            },
            {
              key: 3,
              title: 'three',
              children: [
                {
                  key: 5,
                  title: 'five',
                  children: []
                }
              ]
            },
            {
              key: 4
              title: 'four',
            }
          ]
        }
      ];

如果我用 key 5 展开子元素，那么我会从 onExpand 得到一个带有 [1, 3, 5] 键的数组强>。

然后我从我的服务器获取来自 5 的孩子，然后我想做类似的事情：

data[1][3][5].children.push(/*datafromserver*/)

我该怎么做？

这是动态的，所以我需要以某种方式为每个 onExpandkeys 数组循环一个级别。

感谢您的帮助。

【问题讨论】：

标签： javascript arrays reactjs tree dynamic-arrays

【解决方案1】：

如果我理解正确，您有一个包含一些键的数组以及一个子项和键的数据，并且您想找到正确的子项。你可以通过递归来做到这一点。例如：

function findItem(children, keys){
	if (keys.length === 0) {
		return;
  }

	var key = keys[0];
	 
	var child = (children || []).filter(function(child){
		return child.key === key
	})[0];

	if (child) {
		if (keys.length === 1) {
			return child;
    } else {
			return findItem(child.children, keys.slice(1));
    }
  }
}

var data = [
        {
          key: 1,
          title: 'one',
          children: [
            {
              key: 2,
              title: 'two',
            },
            {
              key: 3,
              title: 'three',
              children: [
                {
                  key: 5,
                  title: 'five',
                  children: []
                }
              ]
            },
            {
              key: 4,
              title: 'four'
            }
          ]
        }
      ];
      
var itemFound = findItem(data, [1,3,5]);
console.log(itemFound.key);
//add some data to is children - itemFound.children.push(someData);

【讨论】：