react歌詞

以下是一個簡單的 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` 屬性設定為歌曲的歌詞。這將顯示包含歌詞的頁面。