用react和electron实现文件树组件(上)

2021-12-01 17:08:29 digiproto

01

创建react和electron工程

创建一个文件夹file-tree-js,进入文件夹,打开终端,输入yarn init -y创建一个javascript项目,这里使用了yarn作为包管理工具,也可以使用nodejs默认安装时自带的npm来创建javascript项目。


输入yarn add react react-dom和yarn add electron -D,安装react和electron,-D表示作为开发依赖安装,开发依赖并不会打包到最终的生产环境中。这里还需要一个打包工具用于将写好的javascript模块进行打包。常见的打包工具有webpack,parcel,rollup等等,这里我使用parcel。


输入yarn add parcel -D安装parcel,同样,parcel作为开发依赖安装到项目中。


创建public和src文件夹,public文件夹用于存放静态资源,src存放js工程的源码。在public文件夹下创建一个index.html,内容如下:

    Demo


在src文件夹下创建一个index.jsx文件,该文件是该工程的入口文件,内容如下:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return hello world;
}
ReactDOM.render(, document.getElementById('root'));


修改package.json文件,内容如下:

{
"name": "file-tree-js",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"type": "module",
"devDependencies": {
 "parcel": "^2.0.0",
 "electron": "15.3.1"
},
"dependencies": {
 "react": "^17.0.2",
 "react-dom": "^17.0.2"
},
"scripts": {
 "build": "parcel public/index.html"
}
}


然后,在终端中输入yarn build,这条命令对应package.json中scripts下的build语句,可以看到其实是使用了刚刚安装的打包工具对代码进行的打包。

如果一切都没有问题,终端会显示这样一条语句,Server running at http://localhost:1234,此时打开浏览器,在地址栏中输入http://localhost:1234,即可访问代码正在运行的页面,可以看到hello world,如下图所示。

image.png


02

实现打开文件夹的功能

在src目录下创建一个main.js文件,该文件用于保存electron部分的代码,如下所示:

const { app, BrowserWindow } = require("electron");
app.on("ready", function () {
let mainWindow = new BrowserWindow({
 width: 1440,
 height: 900,
 minHeight: 270,
 minWidth: 400,
 show: false,
 webPreferences: {
  contextIsolation: false,
  nodeIntegration: true,
 },
});
mainWindow.loadURL("http://localhost:1234");
if (!app.isPackaged) {
 mainWindow.webContents.openDevTools();
}
mainWindow.once("ready-to-show", () => {
 mainWindow.show();
});
});
app.on("window-all-closed", function () {
app.quit();
});


在终端中输入 electron .,可以看到弹出一个窗口,显示的内容为hello world。

图片关键词


然后我们需要创建一个菜单,这个菜单里面有一个菜单项,用于打开文件夹:

const template= [
{
 label: '打开工程',
 click: (menuItem, browserWindow) => {
  // let structure = {};
  const dirPath = dialog.showOpenDialogSync(browserWindow, {
   properties: ['openDirectory'],
  });
  if (dirPath) {
   browserWindow.webContents.send('openFolder', dirPath[0]);
  }
 },
},
];
let menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);


再次运行electron .可以看到窗口的菜单栏中有一个菜单。

图片关键词

点击该菜单,electron打开一个窗口,用于选择文件夹,点击确定后,electron进程会从主进程发送一条信息到渲染进程,渲染进程接收到主进程发来的信息后,便可着手准备之后的工作了。


03

实现mount前区分是文件夹还是文件

我们的组件需要知道它自己代表的是文件夹还是文件,这个动作需要在它被渲染到页面上之前就完成,所以我通过if else语句来判别组件是文件夹组件还是文件组件,如果是文件夹组件,该组件就有许多个子组件,子组件中又包括了文件夹组件和文件组件,并且点击该组件时还要渲染它的子组件;如果是文件组件,那么该组件只需要关心其本身就可以了。


我们可以通过nodejs的fs模块实现读取路径,并判断该路径是文件夹还是文件:

const fs = require(‘fs’);
let stats = fs.statsSync(dir);
If(stats.isDirectory()) {
} else if(stats.isFile()) {
}


这样就可以辨别是文件组件还是文件夹组件,并通过不同的节点渲染到页面上:

const TreeItem = ({ filePath }: { filePath: string }) => {
 let fileStat = fs.statSync(filePath);
 let isFolder = fileStat.isDirectory();
 let isOpen = useRef<boolean>(false);
 let folderDiv = useRef<HTMLDivElement>(null);
 const [children, setChildren] = useState([]);
 const [selected, setSelected] = useState<boolean>(false);
 const itemRef = useRef<HTMLDivElement>(null);
 if (isFolder) {
   return (
     <>
       <div
         title={filePath}
         style={{ background: selected && '#6ab2fb' }}
         ref={folderDiv}
         className="folder tree-item"
         onClick={(e) => {
           e.stopPropagation();
           if (!e.ctrlKey) {
             mainStore.selection.forEach((func, k) => {
               func(false);
             });
             mainStore.selection.clear();
             if (isOpen.current) {
               isOpen.current = false;
               folderDiv.current.classList.remove('open');
             } else {
               let files = fs.readdirSync(filePath).filter((item) => {
                 let stat = fs.statSync(path.join(filePath, item));
                 return path.extname(item) === '.c' || stat.isDirectory();
               });
               setChildren(files);
               isOpen.current = true;
               folderDiv.current.classList.add('open');
             }
           }
           if (!selected) {
             setSelected(true);
             mainStore.selection.set(filePath, setSelected);
           } else {
             setSelected(false);
             mainStore.selection.delete(filePath);
           }
         }}>
         {path.basename(filePath)}
       </div>
       <ul>
         {children.length !== 0 &&
           children.map((child) => {
             let childPath = path.join(filePath, child);
             return (
               <li key={childPath}>
                 <TreeItem filePath={childPath} />
               </li>
             );
           })}
       </ul>
     </>
   );
 } else {
   return (
     <div
       className="tree-item"
       ref={itemRef}
       style={{ background: selected && '#6ab2fb' }}
       data-extension={path.extname(filePath)}
       title={filePath}
       onClick={(e) => {
         codeFileStore.setCurrentSelectedFile(filePath);
         if (!e.ctrlKey) {
           mainStore.selection.forEach((func, k) => {
             func(false);
           });
           mainStore.selection.clear();
         }
         if (!selected) {
           setSelected(true);
           mainStore.selection.set(filePath, setSelected);
         } else {
           setSelected(false);
           mainStore.selection.delete(filePath);
         }
       }}>
       {path.basename(filePath)}
     </div>
   );
 }
};



标签: react 文件树
首页
产品
新闻
联系