【前端】React使用记录

阅读数: 2025-03-08

前言

记录一些使用React中遇到的一些问题

React-Markdown 自定义组件渲染错位问题

在编写大模型应用时，接入DeepSeek-R1输出结果带有think标签，其解析存在错位问题

# 原始内容
<think>think about something<think>
other content
other content

# 解析后
<think>
think about something
other content
other content
<think>

在 GitHub Issue #889 中，也有找到相关 Issue

核心原因分析： Markdown 的段落自动包裹机制

当原始 Markdown 内容包含换行时，react-markdown 默认会将连续文本包裹在 <p> 标签中。例如：

1 2	think about something think about something

会被解析为：

1 2	<p>think about something</p> <p>think about something</p>

当同时使用 rehype-raw 处理原生 HTML 标签时，自定义组件可能被意外包裹在 <p> 标签内，导致 DOM 结构错位。

解决方案1. 关闭自动段落包裹

通过组件映射（components prop）覆盖默认段落行为：

const components = {
  // 使用空标签或 Fragment 替代 p 标签
  p: React.Fragment,
  // 或保留 p 标签但移除包裹逻辑
  // p: ({ children }) => <>{children}</>,
  
  think: ({ children }) => (
    <div style={{ border: '1px solid red' }}>
      {children}
    </div>
  )
};

解决方案2. 将think单独一行

export const MessageComponent: FC<MessageProps> = ({
  message,
}) => {
  const { content, sources } = message;
  const [parsedMessage, setParsedMessage] = useState<string>(content || "");

  useEffect(() => {
    const citationRegex = /(\[\d+\])/g;
    const newMessage = (content || "")
        // 将自定义标签写成块级元素，防止被包裹在 <p> 内 https://github.com/remarkjs/react-markdown/issues/889
        .replace(/<think>/g, '\n\n<think>\n\n').replace(/<\/think>/g, '\n\n</think>\n\n')
    	setParsedMessage(newMessage);
  	}, [content, sources]);

  return (
    <MemoizedReactMarkdown
      components={{
        think: Think,
      }}
      className="prose dark:prose-invert inline leading-relaxed break-words "
      rehypePlugins={[rehypeRaw]}
    >
      {parsedMessage}
    </MemoizedReactMarkdown>
  );
};

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/6fa50f54.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！