用react和electron实现文件树组件（上）
创建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，如下图所示。
实现打开文件夹的功能
在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进程会从主进程发送一条信息到渲染进程，渲染进程接收到主进程发来的信息后，便可着手准备之后的工作了。
实现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(false); let folderDiv = useRef(null); const [children, setChildren] = useState([]); const [selected, setSelected] = useState(false); const itemRef = useRef(null); if (isFolder) { return ( <> { 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)} {children.length !== 0 && children.map((child) => { let childPath = path.join(filePath, child); return ( ); })} </> ); } else { return ( { 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)} ); }
};