React JS中如何让字符串内的换行符在组件渲染时正常生效？

• 方案1：通过CSS属性控制（最推荐，无需修改字符串逻辑）
  你使用的Material UI Typography组件支持直接配置sx样式，给渲染ifAID的Typography添加whiteSpace: 'pre-line'属性即可，修改后代码如下：

<Typography variant="h6" sx={{ whiteSpace: 'pre-line' }}>
  {ifAID}
</Typography>

pre-line属性会自动识别字符串中的\n换行符，同时保留文本自动换行特性，适配容器宽度。

• 方案2：拆分字符串手动插入换行标签
  将目标字符串按\n切割为数组，遍历渲染每一行内容，每一行末尾添加<br />换行标签：

<Typography variant="h6">
  {ifAID.split('\n').map((line, index) => (
    <>
      {line}
      <br key={index} />
    </>
  ))}
</Typography>

• 方案3：替换换行符后插入HTML（不推荐，仅适合完全可控的安全字符串）
  如果你的字符串内容100%可控，没有用户输入的未知内容，可以把\n替换为<br />标签后通过dangerouslySetInnerHTML渲染，该方案存在XSS注入风险，非必要不使用：

<Typography 
  variant="h6" 
  dangerouslySetInnerHTML={{
    __html: ifAID.replace(/\n/g, '<br />')
  }} 
/>

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