在HTML中保留换行：DynamoDB字符串渲染换行丢失问题

你遇到的问题是因为React默认会把字符串内容转义成纯文本，存储的<ol>和<li>标签不会被解析成HTML元素，而是直接显示成文本，导致所有内容挤在一起。下面提供两种可行的解决方法：

方法一：使用dangerouslySetInnerHTML直接解析HTML #

如果存储的福利信息是可信内容（比如仅由后台生成，不会包含用户输入的恶意代码），可以直接让React解析这段HTML字符串：

{initialValues.otherSalaryInformation && (
  <Typography
    color={status === "Expired" && "text.secondary"}
    component="div"  // 把component从p改成div，ol是块级元素，放在p里不符合HTML规范
  >
    <div dangerouslySetInnerHTML={{ __html: initialValues.otherSalaryInformation }} />
  </Typography>
)}

注意：dangerouslySetInnerHTML的命名是为了提醒开发者注意XSS风险，若内容来自不可信用户输入，不要用这种方法。

方法二：解析字符串生成React列表组件 #

如果想避免使用dangerouslySetInnerHTML，可以通过正则提取每个福利项，手动渲染React的列表元素：

{initialValues.otherSalaryInformation && (
  <Typography
    color={status === "Expired" && "text.secondary"}
    component="div"
  >
    <ol>
      {initialValues.otherSalaryInformation
        .match(/<li>(.*?)<\/li>/g)
        ?.map((item, index) => {
          const benefit = item.replace(/<\/?li>/g, '');
          return <li key={index}>{benefit}</li>;
        }) || []}
    </ol>
  </Typography>
)}

这种方法通过正则匹配提取每个<li>标签内的内容，再用React的<ol>和<li>组件重新渲染，完全避免了HTML解析的风险，适合内容来源不确定的场景。

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