<think>
根据用户需求，用户希望了解
React的message组件中提示
内容如何实现
换行。根据提供的引用
内容，引用[1]中有一段代码使用了Ant Design的message组件，并在其中处理了文本
换行的问题。该代码通过正则表达式在每14个字符后添加
换行符，并用message
.info
显示提示信息。但用户的问题是如何在message组件中实现
换行，即如何让提示
内容本身支持
换行显示。
在
React中，Ant Design的message组件默认将
内容作为纯文本处理，不会解析
换行符。因此，要实现
换行，需要将
内容转换为
React元素，例如使用数组或
JSX元素，其中包含
换行符（如<br/>）或使用CSS样式（如white-space: pre-line）。
根据引用[1]中的代码，它使用了message
.info来
显示提示，但并没有直接在提示
内容中
显示多行文本。因此，我们需要参考引用[1]的思路，但更直接地解决在message中
显示换行的问题。
解决方案：
1
. 使用字符串形式的
换行符（'\n'）并设置white-space样式（但message组件默认不支持样式，所以这种方法不行）
2
. 将
内容转换为
JSX元素，使用<br/>标签进行
换行。
然而，Ant Design的message组件支持传入
ReactNode作为
内容。因此，我们可以将字符串按照
换行符分割成数组，然后转换成包含<br/>的
JSX元素。
具体步骤：
- 将需要
显示的字符串按
换行符分割成数组。
- 使用map遍历数组，并在每个元素后添加<br/>（最后一个元素不加）。
- 将这个数组作为
ReactNode传递给message方法。
但是，用户的需求可能是直接让一个带有
换行符的字符串在message中
换行显示。我们可以这样处理：
示例代码：
import { message } from 'antd';
const content = '第一行\n第二行';
// 将字符串分割为行数组
const lines = content
.split('\n');
// 将每行转换为
React节点，并在行之间添加<br/>
const formattedContent = lines
.map((line, index) => (
<span key={index}>
{line}
{index !== lines
.length - 1 && <br />}
</span>
));
// 使用message
显示
message
.info(formattedContent);
或者，我们也可以使用CSS样式来实现，通过设置white-space为pre-line，这样字符串中的
换行符就会被解析。但是，message组件的API允许我们通过设置className来给提示框添加样式吗？查一下Ant Design的文档（这里我们根据经验），message的参数可以是一个对象，其中可以包含className和style属性。
然而，在Ant Design v4中，message方法的第二个参数可以传递配置对象，其中有一个属性是className。我们可以这样尝试：
message
.info({
content: content, // 字符串
内容
className: 'custom-message'
}, 0);
然后在CSS中：
.custom-message {
white-space: pre-line;
}
但是，这种方法可能更简单，因为不需要处理
JSX。但是需要注意，这样设置的样式会应用到整个提示框，包括图标和边框等。因此，我们需要通过CSS选择器定位到具体的
内容部分。
实际上，Ant Design的message组件的
内容部分是使用`
.ant-message-content`类，如果我们给外层添加了自定义类名，那么可以这样写CSS：
.custom-message
.ant-message-content {
white-space: pre-line;
}
这样，我们就可以直接使用字符串中的
换行符来实现
换行。
因此，有两种方法：
方法1：使用
JSX元素（通过分割字符串并插入<br/>）
方法2：使用CSS样式（white-space: pre-line）
根据引用[1]中的代码，他们使用了正则表达式在每14个字符后添加
换行符，然后使用message
.info
显示，但并没有解决在message中
换行的问题。因此，我们需要按照上述方法之一来实现。
综合考虑，方法2更简洁，不需要转换
内容，但可能需要添加全局样式或每个message都添加相同的className。如果项目中有多处使用，可以统一设置message的样式。
然而，需要注意的是，在引用[1]的代码中，他们使用了Ant Design的TextArea组件和message组件。因此，我们假设用户正在使用Ant Design。
因此，我给出两种方法的示例代码：
方法1：使用
JSX
import { message } from 'antd';
const showMessageWithLineBreak = (text) => {
const lines = text
.split('\n');
const content = (
<div>
{lines
.map((line, index) => (
// 注意：这里每个片段都需要一个key，但message中可能不会产生重复，所以用index即可
<
React.Fragment key={index}>
{line}
{index < lines
.length - 1 && <br />}
</
React.Fragment>
))}
</div>
);
message
.info(content);
};
方法2：使用CSS样式
// 首先，在全局样式或者某个CSS文件中定义
.custom-message-with-break
.ant-message-content {
white-space: pre-line;
}
// 在组件中
import { message } from 'antd';
const showMessageWithLineBreak = (text) => {
message
.info({
content: text,
className: 'custom-message-with-break'
});
};
注意：方法2需要确保CSS样式被正确加载。
用户可以根据实际情况选择。如果项目中有多个地方需要
换行，建议使用方法2并在全局设置样式，避免重复代码。
另外，引用[2]提到了
React文本对比组件，与当前问题无关，可以忽略。
因此，回答总结如下：
</think>
在
React 的 Ant Design Message 组件中实现提示
内容换行，主要有以下两种实用方法：
### ✅ 方法一：使用
JSX 元素 + `<br/>`
换行（推荐）
通过将
内容转为
JSX 元素插入
换行符实现：
```
javascript
import { message } from 'antd';
// 分割字符串并插入 <br/>
const content = '第一行
内容\n第二行
内容';
const formattedContent = content
.split('\n')
.map((line, index, arr) => (
<span key={index}>
{line}
{index !== arr
.length - 1 && <br />}
</span>
));
//
显示消息
message
.success({
content: formattedContent,
duration: 3
});
```
### ✅ 方法二：CSS 样式控制（`white-space: pre-line`）
通过 CSS 保留文本中的
换行符：
```
javascript
// 消息调用
message
.info({
content: '第一行
内容\n第二行
内容',
className: 'custom-message-style', // 添加自定义样式类
});
/* CSS 文件 */
.custom-message-style
.ant-message-content {
white-space: pre-line; /* 关键样式 */
display: block;
}
```
### 实现原理
1
. **
JSX 方法**：
- 利用 `split('\n')` 分割原始字符串
- 通过 `map()` 遍历数组插入 `<br/>`
- 支持动态
内容和复杂结构
2
. **CSS 方法**：
- `white-space: pre-line` 保留
换行符渲染
- 需通过 `className` 注入样式
- 注意选择器层级覆盖组件默认样式
### ⚠️ 注意事项
1
. JSX 方法需确保
内容安全（避免 XSS 风险）
2
. 样式方法需全局 CSS 或 CSS Modules 支持
3
. 两种方法在 Ant Design v4/v5 均适用
4
. 复杂
内容推荐使用
JSX 方案（可组合其他组件）
> 示例参考：Ant Design Message
JSX 渲染模式[^1]，CSS 文本控制方案[^2]
本文探讨了在React项目中使用Ant Design Pro的ProTable组件如何实现内容换行，包括使用HTML转义字符和CSS预设样式，以及br标签的运用实例。
扫一扫
69
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
