React中如何渲染含换行与Markdown格式的字符串？

要把包含换行、Markdown语法的字符串渲染成规整UI，直接用<pre>标签没法解析Markdown语法（比如代码块、项目列表），得先把Markdown转成HTML，再安全插入到页面中，具体步骤如下：

1. 安装依赖 #

用marked库解析Markdown，可选highlight.js给代码块添加高亮效果：

npm install marked highlight.js
# 或用yarn
yarn add marked highlight.js

2. 修改渲染逻辑 #

替换原有的<pre>渲染方式，先将Markdown字符串解析为HTML，再通过dangerouslySetInnerHTML插入页面，同时配置marked支持代码高亮：

import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 选择一款代码高亮样式

// 初始化marked配置
marked.setOptions({
  highlight: function(code, lang) {
    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
    return hljs.highlight(code, { language }).value;
  },
  breaks: true, // 将换行符解析为<br>标签
  gfm: true // 支持GitHub风格的Markdown语法
});

const renderChat = () => {
  const tagList: JSX.Element[] = [];
  myMap.forEach((value, key) => {
    // 解析Markdown为HTML字符串
    const parsedHtml = marked.parse(value);
    tagList.push(
      <div key={key} className="chat-message"> {/* 用Map的key作为唯一标识，避免重复渲染问题 */}
        <div className="message-time">{key}</div>
        <div 
          className="message-text"
          dangerouslySetInnerHTML={{ __html: parsedHtml }}
        />
      </div>
    );
  });
  return tagList;
};

3. 添加基础样式 #

给渲染后的内容添加样式，保证排版规整：

.chat-message {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

.message-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.message-text {
  line-height: 1.6;
}

/* 代码块样式 */
.message-text pre {
  background-color: #eee;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 8px 0;
}

.message-text code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
}

/* 列表样式 */
.message-text ul {
  padding-left: 24px;
  margin: 8px 0;
}

.message-text li {
  margin-bottom: 4px;
}

注意事项 #

• dangerouslySetInnerHTML需确保输入的Markdown来自可信源，若为用户输入，需配合dompurify做XSS过滤：

  npm install dompurify
  

  过滤代码示例：

  import DOMPurify from 'dompurify';
  
  const parsedHtml = DOMPurify.sanitize(marked.parse(value));
  

• 不要在循环中用uuid()生成key，直接使用myMap的key作为唯一标识，避免组件不必要的重渲染。

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