React 上的 BBCode 图像标签问题

Question

我有这样的组件，可以在我的网站上呈现

BBCode

图像标签：

代码：

BBCodeComponent.tsx：

React

自定义工具提示.tsx：

import React from "react";
import ReactDOMServer from "react-dom/server";
import CustomTooltip from "./CustomTooltip";

const BBCodeComponent = ({content}) => {
    const parseBBCode = (text) => {
        return text
        .replace(/\[img=(.*?)\](.*?)\[\/img\]/g, (match, title, src) => {
            return ReactDOMServer.renderToString(<CustomTooltip msg={title}><img src={src} alt={title} /></CustomTooltip>);
        })
        .replace(/\[quote](.*?)\[\/quote\]/g, "<blockquote>$1</blockquote>");
    };

    return <div dangerouslySetInnerHTML={{__html: parseBBCode(content)}} />;
};

export default BBCodeComponent;

问题在于它错误地渲染了 

import React from "react";
import {Tooltip} from "react-tippy";

export type Position =
  | "top"
  | "top-start"
  | "top-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end"
  | "right"
  | "right-start"
  | "right-end";
export type Size = "small" | "regular" | "big";
export type Theme = "dark" | "light" | "transparent";

interface IToolTip {
    children: React.ReactNode;
    msg: string;
    pos?: Position, 
    tooltipSize?: Size, 
    tooltipTheme?: Theme
}

const CustomTooltip = ({children, msg, pos = "top", tooltipSize = "big", tooltipTheme = "light"} : IToolTip) => {
    return (
        <Tooltip title={msg} position={pos} size={tooltipSize} theme={tooltipTheme} followCursor={true}>{children}</Tooltip>
    );
};

export default CustomTooltip;

组件。它只是渲染默认的浏览器工具提示而不是

CustomTooltip

。有什么想法如何正确渲染它以显示

react-tippy

图像标题吗？

Answer 1

react-tippy

和

useEffect

方法解决了这个问题：

代码：

ReactDOM.render

我通过使用 

import React, {useEffect} from "react";
import ReactDOM from "react-dom";
import CustomTooltip from "./CustomTooltip";

const BBCodeComponent = ({content}) => {
     useEffect(() => {
        const tooltipWrappers = document.querySelectorAll(".tooltip-wrapper");
        tooltipWrappers.forEach((wrapper) => {
            const title = wrapper.getAttribute("data-title");
            const src = wrapper.getAttribute("data-src");
            
            if (title && src) {
                const tooltipComponent = (
                    <CustomTooltip msg={title}><img src={src} alt={title} /></CustomTooltip>
                );
                ReactDOM.render(tooltipComponent, wrapper);
            }
        });
    }, [content]);

    const parseBBCode = (text) => {
        return text
        .replace(/\[img=(.*?)\](.*?)\[\/img\]/g, (match, title, src) => {
            return `<div class=\"tooltip-wrapper\" data-title=\"${title}\" data-src=\"${src}\"><img src=\"${src}\" alt=\"${title}\"></div>`;
        })
        .replace(/\[quote\](.*?)\[\/quote\]/g, "<blockquote>$1</blockquote>");
    };

    return <div dangerouslySetInnerHTML={{__html: parseBBCode(content)}} />;
};

export default BBCodeComponent;

方法获得所有

.tooltip-wrapper

项目。然后我使用

document.querySelectorAll

循环来获取

forEach

和

title

属性。最后，我创建工具提示组件并渲染它。效果很好。问题已解决。