如何在Electron+React应用中实现文件夹选择并获取路径？

核心思路 #

Electron的dialog模块仅能在主进程中调用，因此需要通过主进程-渲染进程IPC通信实现：主进程处理文件夹选择逻辑，渲染进程（React）触发请求并接收返回的路径。

步骤1：配置主进程（main.js） #

在主进程中监听渲染进程的请求，调用dialog.showOpenDialog弹出文件夹选择窗口，并返回选中路径：

// main.js
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 保持安全配置，不开启Node集成
      contextIsolation: true, // 开启上下文隔离
      preload: path.join(__dirname, 'preload.js') // 预加载脚本，用于安全暴露IPC方法
    }
  });

  // 开发环境加载React dev server，生产环境加载打包后的index.html
  mainWindow.loadURL(
    process.env.NODE_ENV === 'development'
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  );
}

// 监听渲染进程的文件夹选择请求
ipcMain.handle('select-folder', async () => {
  const dialogResult = await dialog.showOpenDialog(mainWindow, {
    properties: ['openDirectory', 'createDirectory'], // 允许选择已有文件夹或创建新文件夹
    title: '请选择目标文件夹'
  });

  // 未取消选择且有路径返回时，返回第一个选中的路径
  if (!dialogResult.canceled && dialogResult.filePaths.length > 0) {
    return dialogResult.filePaths[0];
  }
  return null;
});

app.whenReady().then(createWindow);

步骤2：编写预加载脚本（preload.js） #

通过contextBridge安全地将IPC方法暴露给渲染进程（React），避免直接暴露Electron API：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  selectFolder: () => ipcRenderer.invoke('select-folder')
});

步骤3：React组件中调用方法 #

在React组件中触发文件夹选择，并处理返回的路径：

// src/components/FolderPicker.js
import { useState } from 'react';

export default function FolderPicker() {
  const [selectedFolderPath, setSelectedFolderPath] = useState('');

  const handlePickFolder = async () => {
    const path = await window.electronAPI.selectFolder();
    if (path) {
      setSelectedFolderPath(path);
      // 这里添加后续业务逻辑，比如保存路径、读取文件夹内容等
      console.log('选中的文件夹路径：', path);
    }
  };

  return (
    <div className="folder-picker">
      <button onClick={handlePickFolder}>选择文件夹</button>
      {selectedFolderPath && (
        <p className="selected-path">已选路径：{selectedFolderPath}</p>
      )}
    </div>
  );
}

注意事项 #

• 确保使用Electron 9及以上版本，ipcMain.handle和ipcRenderer.invoke是该版本后引入的API
• 打包时需确保preload.js的路径配置正确，避免打包后无法找到脚本
• 若需要支持多选文件夹，可将properties配置改为['openDirectory', 'multiSelections']，此时返回的filePaths是路径数组

内容的提问来源于stack exchange，提问作者izle_r