如何显示文件夹的默认路径

Question

该应用程序是使用 React 在 Electron 中编写的。

我正在开发一项功能，以便用户可以选择一个文件夹来下载 PC 上的文件。目前我已经创建了：

1. 如果未选择任何内容，则会显示“未选择任何内容”字样的字段
2. 用户可以选择文件夹的“选择文件夹”按钮
3. 能够显示所选文件夹的路径。

我想补充的是：

目前，当您进入具有此功能的页面时，默认字段会显示“未选择任何内容”的字样，我希望默认显示特定文件夹的路径。

从文档中我知道了 dialog.showOpenDialog 和 defaultPath。我尝试实现这一点，但默认情况下仍然显示“未选择任何内容”的铭文。 告诉我如何设置默认路径“C:\Users” ameofuser\音乐' 显示

main.ts

const os = require('os');

const logUserName = os.userInfo().username;

const defaultFolder = `C:\\Users\\${logUserName}\\Music`

ipcMain.handle(IPCChannels.OpenFolder, async () => {
  let result = '';
  await new Promise<void>((resolve) => {
    dialog
      .showOpenDialog({
        properties: ['openDirectory'],
        defaultPath: defaultFolder,
      })
      .then(function (response) {
        result = response.filePaths[0];
        resolve();
      })
  });
  return result;
});

OutFolder.tsx

 export function OutFolder() {
  const [asset, setAsset] = useState('');
  const getPath = () => {
    window.electron.ipcRenderer
      .invoke(IPCChannels.OpenFolder)
      .then((res) => {
        setAsset(res);
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <div>
      <div>{asset || 'Nothing selected'}</div>

      <div>
        <button onClick={getPath}>choose folder</button>
      </div>
    </div>
  );
}

Answer 1

您在评论中提到您希望获得从主程序到渲染器的默认路径。为此，您可以使用额外的 IPC 处理程序和

useEffect

:

main.ts

ipcMain.handle(IPCChannels.GetDefaultPath, () => {
  const logUserName = os.userInfo().username;
  const defaultFolder = `C:\\Users\\${logUserName}\\Music`;

  return defaultFolder;
});

OutFolder.tsx

export function OutFolder() {
  const [asset, setAsset] = useState('');

  useEffect(() => {
    window.electron.ipcRenderer
      .invoke(IPCChannels.GetDefaultPath)
      .then(setAsset)
      .catch((err) => {
        console.error(err);
      });
  }, []);

  const getPath = () => {
    // ...
  };

  return (
    <div>
      <div>{asset || 'Nothing selected'}</div>

      <div>
        <button onClick={getPath}>choose folder</button>
      </div>
    </div>
  );
}

如果您想在显示 UI 之前等待 main 返回路径，您还可以使用额外的状态

isLoading

/

seIsLoading

。

---

这与你的问题无关，你也没有分享你的预载，但是看到你使用

window.electron.ipcRenderer.invoke

调用IPC让我担心你直接暴露

ipcRenderer

。如果是这种情况，请注意，出于安全原因，您不应该这样做。