53、音乐歌词查找应用开发全流程解析

音乐歌词查找应用开发全流程解析

1. 重构歌曲列表组件

1.1 修改接口与导入类型

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

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

并添加导入语句：

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

1.2 渲染歌曲列表

为了渲染歌曲列表，我们将使用 react-bootstrap 的两个 UI 组件：
- ListGroup ：用于渲染元素列表。
- ListGroup.Item ：用于渲染列表中的单个元素。

在 SongsList 组件内添加以下代码：

const songElements = props.songs
    .filter((song: FindSongs_songs) => song.hasLyric