用react和electron实现文件树组件（上）

原创于 2021-11-18 09:40:33 发布 · 607 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#组件化 #java

本文详细介绍如何使用React和Electron构建桌面应用，包括创建项目、实现文件夹打开功能及文件类型判断等关键技术点。

01.创建react和electron工程

02.实现打开文件夹的功能

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

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，内容如下：

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Demo</title>  </head>  <body>    <div id="root"></div>    <script type="module" src="../src/index.jsx"></script>  </body></html>

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

import React from 'react';import ReactDOM from 'react-dom';function App() {  return <div>hello world</div>;}ReactDOM.render(<App />, 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，如下图所示。

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