electron + react 如何实现扫描选定目录歌曲

要实现扫描选定目录歌曲，可以通过以下步骤：

1. 安装 `electron` 和 `react`：使用 npm 安装 `electron` 和 `react`。

2. 在 `renderer` 进程中创建一个文件选择器：使用 `electron` 的 `remote` 模块创建一个文件选择器，让用户选择要扫描的目录。可以使用 `electron` 的 `dialog.showOpenDialog` 方法。

3. 扫描目录并获取歌曲文件：使用 `Node.js` 的 `fs` 模块扫描选定的目录，获取所有的文件，然后使用 `path` 模块判断文件是否为歌曲文件，如果是，将其加入到歌曲列表中。

4. 在 `react` 组件中显示歌曲列表：将扫描到的歌曲文件列表传递给 `react` 组件，然后在组件中渲染歌曲列表。

以下是一些代码示例：

// 在 renderer 进程中创建一个文件选择器，打开选定目录
const { dialog } = require('electron').remote;
dialog.showOpenDialog({ properties: ['openDirectory'] }).then(result => {
  const directoryPath = result.filePaths[0];
  scanDirectory(directoryPath);
});

// 扫描目录并获取歌曲文件
const fs = require('fs');
const path = require('path');
const musicExtensions = ['.mp3', '.wav', '.flac'];
function scanDirectory(directoryPath) {
  fs.readdir(directoryPath, (err, files) => {
    if (err) {
      console.error(err);
      return;
    }
    const musicFiles = files.filter(file => {
      const fileExtension = path.extname(file);
      return musicExtensions.includes(fileExtension);
    });
    console.log(musicFiles);
  });
}

// 在 react 组件中显示歌曲列表
function MusicList(props) {
  const { musicFiles } = props;
  return (
    <div>
      <h2>Music List</h2>
      <ul>
        {musicFiles.map((file, index) => (
          <li key={index}>{file}</li>
        ))}
      </ul>
    </div>
  );
}

以上是一个简单的示例，可以根据自己的需求进行修改和扩展。