用 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 /> 。