53、现代Web开发：LyricsFinder V2实现与优化

现代Web开发：LyricsFinder V2实现与优化

1. 重访SongsList组件

1.1 修改Props接口

首先，回到 songs-list.tsx 文件，将 Props 接口修改为如下形式：

type Props = {
    songs: FindSongs_songs[];
    songSelected: (song: FindSongs_songs) => void;
};

同时添加导入语句：

import { FindSongs_songs } from '../generated/FindSongs';

1.2 渲染歌曲列表

使用 react-bootstrap 的 ListGroup 和 ListGroup.Item 组件来渲染歌曲列表。在 SongsList 组件内添加以下代码：

const songElements = props.songs
    .filter((song: FindSongs_songs) => song.hasLyrics)
    .map((song: FindSongs_son