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

2021-12-01 17:18:37 digiproto 0

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


电话咨询
在线咨询
解决方案
QQ客服