Material UI Accordion中HTML标签显示为字符串的原因

React出于安全考量，默认会自动转义所有插入JSX的字符串内容，防止XSS跨站脚本攻击。你直接把包含<br>、<a>等HTML标签的f.Answer字符串放入Typography的<p>标签中时，这些标签会被转义成普通文本字符，自然无法解析成对应的HTML元素。

方法1：使用dangerouslySetInnerHTML属性 #

这是React提供的专门用于渲染原始HTML内容的属性，不过要注意仅在内容完全可信（比如是后端可控的静态内容）时使用，避免用户输入的恶意代码被执行。
示例代码：

import { Typography, Accordion, AccordionDetails } from '@mui/material';

function buildAccordion(f) {
  return (
    <Accordion>
      {/* 此处可添加AccordionSummary等其他内容 */}
      <AccordionDetails>
        <Typography>
          <p dangerouslySetInnerHTML={{ __html: f.Answer }} />
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
}

方法2：使用HTML转React元素的库（推荐） #

如果内容来源不可完全信任，或者需要更灵活的HTML处理，可以用html-react-parser这类库，它会把HTML字符串转换成React元素，同时支持过滤不安全的标签和属性。
步骤：

1. 安装依赖：

npm install html-react-parser

2. 在组件中使用：

import { Typography, Accordion, AccordionDetails } from '@mui/material';
import parse from 'html-react-parser';

function buildAccordion(f) {
  return (
    <Accordion>
      {/* 此处可添加AccordionSummary等其他内容 */}
      <AccordionDetails>
        <Typography>
          <p>{parse(f.Answer)}</p>
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
}

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