以下是一個簡單的 React 歌詞組件的示例:
```jsx
import React from 'react';
const Lyrics = ({ lyrics }) => (
{lyrics.map((line, index) => (
{line}
))}
);
export default Lyrics;
```
使用方法:
```jsx
import React from 'react';
import Lyrics from './Lyrics';
const lyrics = `第一行歌詞
第二行歌詞
第三行歌詞`;
const App = () => (
);
export default App;
```
在上面的例子中,我們定義了一個 `Lyrics` 組件,它接受一個 `lyrics` 屬性,該屬性包含要顯示的歌詞。我們使用 `map` 函式遍歷每一行歌詞,並將它們渲染為帶有不同樣式的 `line` 元素。最後,我們將 `Lyrics` 組件包裝在應用程式組件中,並將其 `lyrics` 屬性設定為歌曲的歌詞。這將顯示包含歌詞的頁面。