javascript - 是的架构 : How to add new line in error message

Question

matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters, At least one (1) uppercase, one (1) lowercase, one (1) Number and one special case character`
)

和

matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters,\n At least one (1) uppercase, one (1) lowercase, one (1) Number\n and one special case character`
)

如何在匹配错误消息上设置新行？
因为我已经尝试过 \n和 <br/>但它不起作用。
我想做的是这样的:

Must contain 8 characters,
At least one (1) uppercase, one (1) lowercase, one (1) Number 
and one special case character

输出应该是这样的^
但在我这边，它将设置新行。
输出是这样的: Must contain 8 characters, At least one (1) uppercase, one (1) lowercase, one (1) Number and one special case character它不会改变任何东西。

Answer 1

设置 white-space: pre-wrap 将使行在换行符或 <br/> 处断开:

.matches(
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
  `Must contain 8 characters,\n At least one (1) uppercase, one (1) lowercase, one (1) Number\n and one special case character`
),

{errors.firstName && (
  <div style={{ color: "red", whiteSpace: "pre-wrap" }}>
    {errors.firstName.message}
  </div>
)}

现场演示