换行符未在页面上显示为换行符

Question

我从 API 检索警报消息并使用 \r\n 方法加入。它正确加入并正确记录到控制台，但是它没有在新行上显示警报。相反，它只是忽略这些字符并继续到字符串的下一部分。

例子：

//Thunk
if (warningResults && warningResults.length) {
          dispatch(
            upsertAppNotification(
              AppNotificationsCenter.getNotificationByKey(
                NotificationKeys.CustomerAlertWarning,
                warningResults.join('\r\n')
              ),
              0
            )
          );
        } 

我将通知记录到控制台，它显示如下：

Message: "Warning Message One\r\nWarning Message Two, 

但它在页面上显示如下：

这是显示消息的代码：

{props.message && (
                <StyledTextBox data-testid={props.messageTestId} maxWidth="80%">
                  <Typography variant="paragraph">{props.message}</Typography>
                </StyledTextBox>
              )}

Answer 1

用pre标签包裹你的文字

<pre>
   {message}
</pre>

或添加此样式：white-space: pre; 或 white-space: pre-line;