Question

error I ve been trying to use a gantt chart in my react app which works fine when it first loads up and if I refresh. However whenever I change the props and componentDidUpdate() triggers, which triggers :

 if (prevProps.chart !== this.props.chart) {
            //console.log("the state has changed comp", this.state.chart)
            document
                .getElementById("mermaid-chart")
                .removeAttribute("data-processed");
            mermaid.contentLoaded()
            
        }

我得到那个图像,强迫我更新页面

import React from "react";
import mermaid from "mermaid";


mermaid.initialize({
    startOnLoad: true,
    securityLevel: "loose",
    gantt: {
        barHeight: 40,
        barGap: 15,
        sectionFontSize: 20,
        leftPadding: 200,
        numberSectionStyles: 2,
        fontSize: 15,
    }
});


export default class Mermaid extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chart: props.chart,
        };
    }

    componentDidMount() {
        //console.log("comp mounted")
        mermaid.contentLoaded();
    }

    componentDidUpdate(prevProps, prevState) {
         //console.log("the state has not changed comp", prevProps.chart);
        // console.log("the current state has not changed comp", this.props.chart);
        if (prevProps.chart !== this.props.chart) {
            //console.log("the state has changed comp", this.state.chart)
            document
                .getElementById("mermaid-chart")
                .removeAttribute("data-processed");
            mermaid.contentLoaded()
            
        }
    }
    render() {
        return <div className="mermaid" id="mermaid-chart">{this.state.chart}</div>;
    }

This is what my code is looking like, in my component I have return (<Mermaid chart={chart} />)

当我使用旧版的Mermaid.js时,它告诉我它试图用文字来绘制一个图表:“ & lt; svg id =. ” 我认为发生这种情况是因为它试图让 div 的第一个孩子返回,而我不知道如何让它去制造道具。

任何帮助都会很有帮助的

Answer 1

不久前得到的,这里是最新消息以防将来有人发现

 componentDidMount() {
        
        mermaid.contentLoaded();
    }

    async drawDiagram(chart) {
    let element = document.querySelector("#mermaid-container");
    
    const graphDefinition = chart
    
    const { svg } = await mermaid.render("mermaid-chart", graphDefinition);
    
    element.innerHTML = svg;
    }

    async componentDidUpdate(prevProps, prevState) {
         this.props.chart);
        if (prevProps.chart !== this.props.chart) {
            

            await this.drawDiagram(this.props.chart);
  
        }
    }

    render() {
        return (
            <div className="mermaid" id="mermaid-chart">
                {this.state.chart}
            </div>
        );
    }

友情链接