用React渲染ASCII和弦图
几周前，我勉强决定我的Chord项目需要基于Web的前端。 在权衡各种选择之后，我决定将前端的核心实现为基于React的ASCII和弦图表渲染器。 经过一些初步的代码草绘，我有了一个可以正常工作的原型，后来进行了一些修订，我发现自己对最终的代码感到满意。 让我们深入研究吧！ 在开始研究代码之前，让我们看一下要构建的内容。 我们的和弦后端将和弦视为代表在特定琴弦上弹奏的琴弦的可选数字列表，或代表代表所弹奏的琴弦和用于弹奏该琴弦的手指的可选两元组数字列表。 例如，在后端，我们将使用以下列表代表经典的开放C大调和弦： [nil，3，2，0，1，nil] 并以普通的指法： [nil，{3，3}，{2，2}，{0，nil}，{1，1}，nil] 不幸的是，Javascript没有“元组”类型，因此我们不得不将和弦表示为一维或二维数字数组。 在我们的前端，这些相同的和弦将像这样表示： [null，3，2，0，1，null] [null，[3，3]，[2，2]，[0，null]，[1，1]，null] 我们的目标是将该表示形式转换为以下和弦图： 让我们开始吧！ 我们将从创建一个新的React组件开始，以渲染通过给定chord道具传递的chord ，并渲染一个样式化的pre元素，以保存我们即将成为的和弦图表：…
