提问人:jin_eu 提问时间:10/16/2023 更新时间:10/16/2023 访问量:34
如何在 ReactJS 中删除美人鱼的默认错误 SVG 并将其替换为美人鱼的最后一个渲染 svg
How to remove the default Error SVG of mermaid and replace it with the last render svg of mermaid in ReactJS
问:
我在我的 ReactJS 项目中使用了 mermaid,我遇到了 mermaid 的默认错误 svg 的问题。如何隐藏此默认错误svg并将其替换为最后一个渲染svg
这是我的代码:
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
答: 暂无答案
下一个:摩纳哥编辑器 删除 2 个字符
评论