Нажать дочернему элементу через древовидную структуру с массивом ключей

Я использую React Tree для построения древовидной структуры своего приложения. Я хочу выполнять запрос к серверу каждый раз, когда узел расширяется, чтобы загрузить дочерние элементы указанного узла. Я использую свойство onExpand, чтобы получить ключ расширенного узла. Это прекрасно работает, но проблема возникает, когда узел находится не на первом уровне дерева.

Если узел находится не на первом уровне, свойство onExpand возвращает массив ключей, который проходит через каждый открытый ключ, пока не будет достигнут узел. Моя проблема в том, что после того, как я получаю от дочерних данных (для добавления) с сервера, мне нужно передать их дочерним элементам расширенного узла, и мне нужно пройти данные дерева, чтобы выполнить толчок на расширенном узле.

Пример:

Это данные, которые строят дерево:

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.

Спасибо за помощь.


reactjs javascript arrays dynamic-arrays tree
person Rodius    schedule 12.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если я правильно понимаю, у вас есть массив некоторых ключей и данных дочерних элементов и ключей, и вы хотите найти правильный дочерний элемент. Вы можете сделать это с помощью рекурсии. Например:

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);

person ShacharW    schedule 12.04.2018