React.js 在每个数字后开始一个新行[重复]答案

【问题标题】：React.js start a new line after every number [duplicate]React.js 在每个数字后开始一个新行[重复]
【发布时间】：2022-01-25 12:07:03
【问题描述】：

我正在从我的数据库中获取一个具有这种格式的曲目列表：

" 01.介绍 02. 工资 03. Hyänen（壮举。Samra） 04. Ich will es bar (feat. Haftbefehl) 05. Am Boden bleiben（壮举 Casper & Montez） "

它是一个单一的字符串。现在我只是简单地用：

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

和 {trackList} 在我的应用程序中。我的目标是设置样式，以便在 new 数字开始时换行。有没有办法做到这一点？

【问题讨论】：

标签： javascript css reactjs

【解决方案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>
    );
}

除了上面代码中的<p>标签，你可以使用任何html标签来生成你想要的结果。

【讨论】：