AI翻译版文章：介绍shoka

Shoka：一个实用且有趣的 React 组件

作者： 史展硕
发布日期： 2025年8月13日
阅读时间： 2分钟

介绍 Shoka：一个 React.js 组件

Shoka 是一个 React.js 组件，可以在页面上展示您喜爱的歌曲歌词。Shoka 这个名字来源于我最喜欢的歌曲中的日语词汇"唱歌"(しょうか)。

使用 Shoka

安装 Shoka

首先安装这些必需的 npm 包：

React.js（我推荐使用 Vite 安装）

使用 Vite 创建 React 项目的命令：

npm create vite@latest # 更多信息请访问 https://vite.dev

然后从以下地址下载 Shoka：
https://codeberg.org/oldhelps/shoka

使用 Shoka JSX 元素

使用方式如下：

// 可能需要这个：import React from 'react'
import Shoka from './shoka'
// 您的代码...
<Shoka />
// ...

该 JSX 元素有 2 个属性：

• color：文本颜色（CSS 颜色值）
• align：对齐方式（left, right 或 center）

默认值为 color='white' 和 align='center'

shoka.json 文件

在 assets 文件夹中需要有一个 shoka.json 文件：

// 在 shoka.jsx 文件中有提示语句可帮助您找到 shoka.json 文件
import {lyrics} from '../assets/json'
/**
  * 当然，您可以通过编辑 JSX 代码更改文件位置
  * 在 Vite 项目中，如果将 shoka.jsx 放在 src/components/ 文件夹下，可以使用此路径
  */

shoka.json 文件格式如下：

[
  "汽笛一声新橋を<br>はや我汽車は離れたり<br>愛宕の山に入りのこる<br>月を旅路の友として",
  "右は高輪泉岳寺<br>四十七士の墓どころ<br>雪は消えても消えのこる<br>名は千載の後までも",
  "窓より近く品川の<br>台場も見えて波白く<br>海のあなたにうすがすむ<br>山は上総か房州か",
  "梅に名をえし大森を<br>すぐれば早も川崎の<br>大師河原は程ちかし<br>急げや電気の道すぐに",
  "鶴見神奈川あとにして<br>ゆけば横浜ステーシヨン<br>湊を見れば百舟の<br>煙は空をこがすまで",
  "横須賀ゆきは乗替と<br>呼ばれておるる大船の<br>つぎは鎌倉鶴が岡<br>源氏の古跡や尋ね見ん",
  "八幡宮の石段に<br>立てる一木の大鴨脚樹<br>別当公曉のかくれしと<br>歴史にあるは此蔭よ",
  //...
]

注意事项：

• 换行必须使用 <br> 标签，不能使用 \n 或 \r 等字符
• 文件是一个包含多个字符串的大型数组
• 每个数组元素对应一段歌词段落

现在，尽情使用 Shoka 吧！

原文见:http://ohen.hashnode.dev