0

Подскажите как можно удалить "папку" (объект) при нажатии кнопки в нашем дереве.

Наш массив с объектами (наше дерево):

export const tree = [
  {
    id: 0,
    name: "System",
    type: "folder",
    children: [
      {
        id: 0,
        name: "bin",
        type: "folder",
        children: [
          {
            id: 0,
            name: "driver",
            format: ".exe",
            type: "doc"
          },
          {
            id: 1,
            name: "readme",
            format: ".txt",
            type: "doc"
          }
        ]
      },
      {
        id: 1,
        name: "settings",
        format: ".txt",
        type: "doc"
      },
      {
        id: 2,
        name: "install",
        format: ".exe",
        type: "doc"
      }
    ]
  },
  {
    id: 1,
    name: "Games",
    type: "folder",
    children: [
      {
        id: 0,
        name: "gta",
        type: "folder",
        children: [
          {
            id: 0,
            name: "game",
            format: ".exe",
            type: "doc"
          },
          {
            id: 1,
            name: "readme",
            format: ".txt",
            type: "doc"
          }
        ]
      },
      {
        id: 1,
        name: "pubg",
        type: "folder",
        children: [
          {
            id: 0,
            name: "data",
            type: "folder",
            children: []
          },
          {
            id: 1,
            name: "launch",
            format: ".exe",
            type: "doc"
          },
          {
            id: 2,
            name: "logs",
            format: ".txt",
            type: "doc"
          }
        ]
      },
      {
        id: 2,
        name: "nfs",
        type: "folder",
        children: [
          {
            id: 0,
            name: "play",
            format: ".exe",
            type: "doc"
          },
          {
            id: 1,
            name: "speed",
            format: ".txt",
            type: "doc"
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: "Other",
    type: "folder",
    children: [
      {
        id: 0,
        name: "User",
        type: "folder",
        children: [
          {
            id: 0,
            name: "Real",
            type: "folder",
            children: [
              {
                id: 0,
                name: "Test",
                type: "folder",
                children: []
              }
            ]
          }
        ]
      }
    ]
  }
];

В рендере при рекурсии создаем <Folder> передаем в этот компонент Folder пропсы и хендлер для удаления данного объекта

renderFolder = (folder) => (
    <Folder 
      ...
      folder={folder}
      removeFolderHandler={this.removeFolderHandler}
      ...
    >
    ...
    </Folder>
}

Вот что приходит в (folder)

{id: 0, name: "System", type: "folder", children: Array(3)}
{id: 0, name: "bin", type: "folder", children: Array(2)}
{id: 1, name: "Games", type: "folder", children: Array(3)}
{id: 0, name: "gta", type: "folder", children: Array(2)}
{id: 1, name: "pubg", type: "folder", children: Array(3)}
...

В компоненте <Folder> при нажатии <button> вызываем наш removeFolderHandler с нашим объектом

<button onClick={() => this.props.removeFolderHandler(this.props.folder)} >
    Удалить
</button>

И в наш родительский компонент в метод removeFolderHandler приходит наш "объект"

 removeFolderHandler = (folder) => {
     // ???
 }

Так вот как его найти и удалить его из нашего "дерева" tree. Собственно нужен алгоритм для removeFolderHandler.

Были попытки рекурсией искать нужную нам "папку" (объект) сравнивая с текущим, но мне сказали так делать нельзя.

Надеюсь доступно объяснил чего я хочу.

4
  • Наверное надо спрашивать у тех людей, которые сказали, как делать нельзя. Раз они знают как нельзя, то возможно знают, как можно. 21 июн 2019 в 3:31
  • сказали лучше такое делать через плоские списки
    – reAL
    21 июн 2019 в 13:08
  • Что бы сделать через плоский список - нужен плоский список. А что бы сделать плоский список - нужна рекурсия. А рекурсию юзать нельзя... Парадокс! 21 июн 2019 в 13:20
  • В общем трабл в понимании был, используя 1-ю рекурсию сделать плоский список, и уже его использовать дальше
    – reAL
    21 июн 2019 в 20:36

1 ответ 1

0

Ответ ниже вариант с рекурсией, там бесконечная вложенность children и ка кбез рекурсии пока не понятно! Рекурсия идет не на всё дерево, перебирая его, а только на компоненты children, остальные элементы отбрасываются только фильтром (filter()).

const newTree = tree.filter(item => {
    if (item.name === folder.name) return false;
    if (item.children.length === 0) return true;
    item.children = this.getItemByName(item.children, folder.name);
    return true;
});

console.log(newTree);

...
getItemByName = (folders, name) => {
    return forlders.filter(item => {
        if (item.name === name) return false;
        if (item.children.length === 0) return true;
        item.children = this.getItemByName(item.children, name);
        return true;
    });  
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.