模板字面量（Template Literal）换行失效问题咨询

在React中，模板字面量里的换行不会被HTML自动解析——因为HTML默认会忽略文本中的换行和多余空格。下面是几种可行的解决方法：

方法1：使用CSS样式（推荐） #

给包含文本的容器添加white-space: pre-line样式，这样HTML会识别文本中的换行符，同时自动合并多余的空格：

.tipbox {
  white-space: pre-line;
}

你的JSX代码不需要修改，保持原模板字面量即可：

<div className='tipbox'>
  <HiOutlineLightBulb style={{marginRight:"10px"}}/>
  {`THIS IS MY FIRST LINE.

THIS IS MY SECOND LINE

THIS IS MY THIRD LINE`}
</div>

方法2：手动添加<br />标签 #

把模板里的换行替换成<br />，但要注意直接写字符串的话React会把<br />当成纯文本，需要用dangerouslySetInnerHTML渲染：

<div className='tipbox'>
  <HiOutlineLightBulb style={{marginRight:"10px"}}/>
  <div dangerouslySetInnerHTML={{ __html: `THIS IS MY FIRST LINE.<br /><br />THIS IS MY SECOND LINE<br /><br />THIS IS MY THIRD LINE` }} />
</div>

⚠️ 注意：使用dangerouslySetInnerHTML要确保内容安全，避免XSS攻击。

方法3：用<pre>标签包裹文本 #

<pre>标签会保留文本的原始格式（包括换行和空格），但默认带有等宽字体和滚动条，需要额外调整样式：

<div className='tipbox'>
  <HiOutlineLightBulb style={{marginRight:"10px"}}/>
  <pre>{`THIS IS MY FIRST LINE.

THIS IS MY SECOND LINE

THIS IS MY THIRD LINE`}</pre>
</div>

添加CSS去掉默认样式：

.tipbox pre {
  margin: 0;
  font-family: inherit; /* 继承父元素字体 */
  white-space: pre-line; /* 可选：合并多余空格，只保留换行 */
}

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