React中BBCode图片标签的react-tippy Tooltip渲染异常问题

问题根源 #

你用ReactDOMServer.renderToString把CustomTooltip转成静态HTML后，通过dangerouslySetInnerHTML插入DOM的方式，只会生成纯静态标签结构，不会触发React的组件挂载流程。而react-tippy的自定义tooltip依赖客户端JS逻辑（事件监听、动态DOM操作）才能生效，静态HTML里只有原始img标签和空容器，没有绑定必要的交互逻辑，因此只会显示浏览器默认的title提示。

正确实现方案 #

不要将解析结果转为HTML字符串，而是直接解析成React元素数组，让React正常渲染这些组件，确保CustomTooltip被正确挂载并执行生命周期逻辑。

修改后的BBCodeComponent.tsx #

import React from "react";
import CustomTooltip from "./CustomTooltip";

const BBCodeComponent = ({ content }) => {
  const parseBBCodeToReactElements = (text) => {
    // 将文本拆分为普通文本与BBCode标签片段
    const parts = text.split(/(\[img=(.*?)\](.*?)\[\/img\]|\[quote](.*?)\[\/quote\])/);
    const elements = [];

    parts.forEach((part, index) => {
      // 处理图片BBCode标签
      const imgMatch = part.match(/\[img=(.*?)\](.*?)\[\/img\]/);
      if (imgMatch) {
        const [, title, src] = imgMatch;
        elements.push(
          <CustomTooltip key={`img-${index}`} msg={title}>
            <img src={src} alt={title} />
          </CustomTooltip>
        );
        return;
      }

      // 处理引用BBCode标签
      const quoteMatch = part.match(/\[quote](.*?)\[\/quote\]/);
      if (quoteMatch) {
        elements.push(
          <blockquote key={`quote-${index}`}>{quoteMatch[1]}</blockquote>
        );
        return;
      }

      // 普通文本直接添加
      if (part.trim()) {
        elements.push(<span key={`text-${index}`}>{part}</span>);
      }
    });

    return elements;
  };

  return <div>{parseBBCodeToReactElements(content)}</div>;
};

export default BBCodeComponent;

代码说明 #

• 放弃正则替换生成HTML字符串的思路，改为拆分文本片段并逐个生成对应React元素
• 为每个动态生成的元素添加唯一key，符合React列表渲染规范
• CustomTooltip作为React组件被直接渲染，会正常触发挂载流程，react-tippy的JS逻辑可正常初始化，从而显示自定义tooltip

额外注意事项 #

• 确保已正确引入react-tippy的CSS样式（如import 'react-tippy/dist/tippy.css'），否则tooltip样式会异常
• 若需支持更多BBCode标签，可按相同逻辑扩展解析规则，始终保持生成React元素而非HTML字符串

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