Как сделать дерево каталогов в электронном

Я попытался сделать дерево каталогов, такое как проводник на ОС Windows.

Советы

Как получить имя файла/каталога из пути

let name = path.basename(fullPath)
console.log(‘path -> ‘ + fullPath); 
console.log(‘name -> ‘ + name);

Как получить расширение из пути к файлу или имени файла

const extension = path.extname(name)

Как выбрать каталог по диалогу.

Сначала я решил базовый каталог. Затем этот каталог устанавливается в состояние на React.

const win = remote.getCurrentWindow();
const options = {
  properties: [‘openDirectory’],
  title: ‘Choose folder’,
  defaultPath: app.getPath(‘home’)
};
const decided = dialog.showOpenDialog(win, options);
console.dir(decided);
this.setState({
  activePath: decided[0],
  files: []
});

Как получить списки каталогов.

Я получаю список каталогов и создаю DirectoryItem, используя рекурсивный компонент.

export const createDirectoryItem = (name, fullpath, children = []) => {
  return {
    name: name,
    fullpath: fullpath,
    children: children
  };
};
export const getChildDirectories = folderPath => {
  let names = fs.readdirSync(folderPath);
  let children = [];
  names.map(name => {
    let fullpath = path.join(folderPath, name);
    let stat = fs.statSync(fullpath);
    if (stat.isDirectory()) {
      children.push(createDirectoryItem(name, fullpath));
    }
  });
  return children;
};

Рекурсивный компонент для дерева каталогов.

Я сделал рекурсивный компонент DirectoryTree.jsx .

• Этот компонент имеет расширенные списки флагов и каталогов как дочерние.
• После загрузки этого компонента приложение ищет дочерние каталоги и устанавливает их в этот компонент как children.
• Когда расширенный флаг становится истинным, загружается следующий рекурсивный компонент.

Ссылка