如何在 ReactJS 中删除美人鱼的默认错误 SVG 并将其替换为美人鱼的最后一个渲染 svg

How to remove the default Error SVG of mermaid and replace it with the last render svg of mermaid in ReactJS

提问人:jin_eu 提问时间:10/16/2023 更新时间:10/16/2023 访问量:34

问:

我在我的 ReactJS 项目中使用了 mermaid,我遇到了 mermaid 的默认错误 svg 的问题。如何隐藏此默认错误svg并将其替换为最后一个渲染svg

enter image description here

这是我的代码:

mermaid.initialize({
    startOnLoad: true
});

const Mermaid = React.forwardRef((props, ref) => {

    const { code, hanleMessage, handleExit } = props;

    const [state, setState] = useState({
        errMessage: '',
        isErr: false,
        errArray: [],
        codeNotErr: ``,
        diagramCode: ``,
        errMode: false,
    });

    // handle mermaid
    useEffect(() => {
        const mermaidChart = document.getElementById("mermaid-chart");

        if (mermaidChart) {
            mermaidChart.removeAttribute("data-processed");
            mermaid.contentLoaded();
        }

        let isErr = false;

        mermaid.parseError = (err) => {
            if (code === '') return;
            isErr = true;
            setState(prev => ({...prev, errMessage: err?.message, isErr: true }));
        }

        setTimeout(() => {
            if (isErr === false) {
                setState(prev => ({ ...prev, isErr: false, codeNotErr: code, errMode: false }));
            }
        }, 0);

        setState(prev => ({...prev, diagramCode: code}))

    },[code]);

    useEffect(() => {
        // const mermaidChart = document.getElementById("mermaid-chart");
        if (state.isErr && state.codeNotErr !== '') {
            setState(prev => ({...prev, errMode: true}));
            
        }
    },[state.isErr])

    return (
        <div className="content">
            <div ref={ref} id="mermaid-chart" className={`mermaid ${state.isErr ? 'opacity': ''}`} dangerouslySetInnerHTML={{ __html: code }}></div>
        {...}
        </div>
    );
});

export default Mermaid;

我想隐藏默认错误svg'文本中的语法错误'并将其替换为没有错误的最后一个渲染svg

reactjs 美人鱼

评论


答: 暂无答案