如何使用intl.formatMessage为长句子添加多行换行？

你尝试通过{br}占位符结合<br />元素实现换行，但输出仍显示{br}而非实际换行，这是因为intl.formatMessage默认仅处理字符串值，无法直接渲染React元素。以下是几种可行方案：

方案一：使用react-intl的FormattedMessage组件（React项目推荐） #

如果是React项目，直接用FormattedMessage组件，它支持将React元素作为占位符值渲染：

import { FormattedMessage } from 'react-intl';

<FormattedMessage
  description="A message"
  defaultMessage="My name is Breaking line {br} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed diam quis turpis pellentesque commodo. Vivamus tristique, mauris et consectetur viverra, velit nisl consequat ipsum, eu lobortis tortor mi sed justo. {br} Fusce ac faucibus quam, nec interdum ex.{br} Nullam ornare, nunc in malesuada finibus, lectus ex convallis est, a tincidunt nunc lectus id ligula."
  values={{
    br: <br />
  }}
/>

方案二：用换行符\n配合CSS样式（纯字符串场景） #

如果需要获取纯字符串，可在defaultMessage中直接用\n换行，然后在渲染时通过CSS解析换行：

const message = intl.formatMessage(
  {
    description: 'A message',
    defaultMessage: 'My name is Breaking line\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed diam quis turpis pellentesque commodo. Vivamus tristique, mauris et consectetur viverra, velit nisl consequat ipsum, eu lobortis tortor mi sed justo.\nFusce ac faucibus quam, nec interdum ex.\nNullam ornare, nunc in malesuada finibus, lectus ex convallis est, a tincidunt nunc lectus id ligula.'
  }
);

渲染该字符串的元素添加CSS样式：

.message-box {
  white-space: pre-line;
}

方案三：HTML字符串结合dangerouslySetInnerHTML（需注意XSS风险） #

若必须用占位符替换换行，可传入HTML字符串，再通过dangerouslySetInnerHTML渲染，但要确保内容安全，避免XSS攻击：

const message = intl.formatMessage(
  {
    description: 'A message',
    defaultMessage: 'My name is Breaking line {br} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed diam quis turpis pellentesque commodo. Vivamus tristique, mauris et consectetur viverra, velit nisl consequat ipsum, eu lobortis tortor mi sed justo. {br} Fusce ac faucibus quam, nec interdum ex.{br} Nullam ornare, nunc in malesuada finibus, lectus ex convallis est, a tincidunt nunc lectus id ligula.'
  },
  {
    br: '<br />'
  }
);

渲染时：

<div dangerouslySetInnerHTML={{ __html: message }} />

内容的提问来源于stack exchange，提问作者movoid