react-electron中如何杀死指定的对应子进程？

你现在的核心问题是只声明了单个process变量存储子进程实例，每次点击新的hello按钮启动子进程时，都会覆盖掉之前存储的子进程引用，所以所有cancel按钮触发终止逻辑时，拿到的都是最后一次启动的子进程，自然会出现杀错进程的问题。

具体实现方案如下：

第一步：给每组按钮绑定唯一标识 #

渲染层给每组hello/cancel按钮传入唯一ID（比如第一组传1，第二组传2），这样主进程就能区分不同按钮启动的进程：

<div>
  <!-- 第一组按钮 -->
  <button onClick={() => ipcRenderer.send('runScript', 1)}>hello</button>
  <button onClick={() => ipcRenderer.send('killScript', 1)}>cancel</button>
</div>
<div>
  <!-- 第二组按钮 -->
  <button onClick={() => ipcRenderer.send('runScript', 2)}>hello</button>
  <button onClick={() => ipcRenderer.send('killScript', 2)}>cancel</button>
</div>

第二步：主进程用Map存储多进程实例 #

主进程不要用单个变量存进程，改用Map结构以按钮ID为key存储对应的子进程，实现一一对应：

// 替换原来的单个process变量，用Map存储多组进程
const processMap = new Map()

ipcMain.on("runScript", (event, btnId) => {
  // 可选逻辑：如果同ID已经有运行中的进程，先杀掉避免重复启动
  if (processMap.has(btnId)) {
    kill(processMap.get(btnId).pid, 'SIGKILL')
  }
  // 启动新进程并存入Map
  const childProcess = spawn('node helloworld.js', [], { shell: true })
  processMap.set(btnId, childProcess)

  // 可选优化：进程自动退出后清除Map里的对应条目
  childProcess.on('exit', () => {
    processMap.delete(btnId)
  })
});

ipcMain.on("killScript", (event, btnId) => {
  // 拿到对应ID的进程执行终止
  if (processMap.has(btnId)) {
    const targetProcess = processMap.get(btnId)
    kill(targetProcess.pid, 'SIGKILL')
    processMap.delete(btnId)
  }
});

后续如果要新增更多组按钮，只要给新按钮分配新的唯一ID即可，不需要修改主进程逻辑。

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