React.js在每个数字后面开始一行

Question

我正在从数据库中获取一个跟踪列表，该列表的格式为：

">01.简介02.Waage03.海宁(壮举。Samra(04.我将成为酒吧(壮举。Haftbeffehl(05.Am Boden bleiben(壮举。卡斯珀和蒙特斯("；

这是一个单独的字符串。现在我只是用来称呼它

if (album && album.title) {
trackList = (
<div className={'trackList'} style={{ fontSize: 16 }}>
{album.tracklist}
</div>
);
}

和我的应用程序中的｛trackList｝。我的目标是设计它的样式，这样当新的数字开始时，它就会生成一条新行。有办法做到这一点吗？

Answer 1

您可以通过split方法将字符串拆分为一个数组，然后通过map方法迭代数组，如下所示：

if (album && album.tracklist) {
trackList = (
<div className={'trackList'} style={{ fontSize: 16 }}>
{album.tracklist
.trim()
.split(/D(?=d+.s)/g)
.map((t, i) => (
<p key={i}>{t}</p>
))}
</div>
);
}

您可以使用任何html标记来生成您期望的结果，而不是上面代码中的<p>标记。