用 HTML 分割字符串<br>标记为多行字符串

Question

我有一个包含 html break 标记的字符串来拆分字符串，因为我想将字符串拆分为多行，但它似乎没有在 UI 中将字符串呈现为多行。 我怎样才能实现以下目标？

testString = "This is line one<br>This is line two<br>This is line three"

预期输出：

This is line one
This is line two
This is line three

我阅读了有关dangerouslysettinginnerHTML的信息，但不想在我的代码中使用它。 就分裂而言，我所做的是我尝试过

text.split('<br>').map(each => each + <br>)

但这没有用。 任何提示或帮助将不胜感激。

Answer 1

在dangerouslySetInnerHTML之外执行此操作的最简单方法是将字符串拆分并平面映射到 JSX 元素数组。

{testString
  .split(/<br ?\/?>/)
  .flatMap((line, i) => [line, <br key={`line-${i}`} />])}

正则表达式分隔符旨在拆分任何形式的<br> 、 <br/>或<br /> 。