React中其他组件<p>标签内渲染message属性时如何实现换行

问题原因 #

• React 默认会转义字符串内的 HTML 标签，直接把 <br> 写在字符串里会被当成普通文本渲染，不会生效
• HTML 原生 <p> 标签默认不识别 \n 换行符，只会将其渲染为普通空格，所以直接加 \n 也不会换行

方案1：CSS 适配（最推荐） #

通过给 <p> 标签添加 white-space 属性让其识别 \n 换行符，改造成本最低，无安全风险。

步骤1：修改 message 内容，插入 \n 换行 #

const modalOn = (date, clinic) => {
  setError({
    title: "Do you want to remove the following shift?",
    message: "DATE: " + date + "\nCLINIC: " + clinic,
  });
};

步骤2：给渲染 message 的 <p> 标签添加样式 #

行内样式写法：

<p style={{whiteSpace: 'pre-line'}}>{error.message}</p>

全局 CSS 写法：

/* 替换为你对应的p标签选择器 */
.error-message-p {
  /* 识别换行符，同时自动折行长文本 */
  white-space: pre-line;
}

方案2：传递 JSX 结构 #

直接把 message 定义为 JSX 元素，插入 <br /> 标签实现换行，无需修改 CSS。

const modalOn = (date, clinic) => {
  setError({
    title: "Do you want to remove the following shift?",
    message: <>DATE: {date}<br />CLINIC: {clinic}</>,
  });
};

渲染时直接正常调用即可：

<p>{error.message}</p>

方案3：dangerouslySetInnerHTML（不推荐，仅作参考） #

如果必须用带 HTML 标签的字符串渲染，可以用 React 提供的危险渲染属性，仅在你确定 message 内容完全可控、无用户输入内容时使用，否则有 XSS 注入风险。

步骤1：给 message 插入 <br> 标签 #

const modalOn = (date, clinic) => {
  setError({
    title: "Do you want to remove the following shift?",
    message: "DATE: " + date + "<br />CLINIC: " + clinic,
  });
};

步骤2：修改渲染逻辑 #

<p dangerouslySetInnerHTML={{__html: error.message}} />

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