React项目中Mermaid重渲染异常：显示纯文本或不更新的问题求助

问题根源 #

1. 首次加载时mermaid.contentLoaded()可解析初始的.mermaid元素，但动态更新文本后，Mermaid不会自动重新识别并解析新内容。
2. 你修改后的组件将chart存入state，但未监听props变化同步更新state，导致父组件传递的内容变更时，组件无法触发重新渲染。

正确实现方案 #

方案一：类组件实现 #

通过监听props变化，手动调用Mermaid的渲染方法更新图表：

import React from 'react';
import mermaid from 'mermaid';

class Mermaid extends React.Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
  }

  componentDidMount() {
    this.renderMermaid();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.chart !== this.props.chart) {
      this.renderMermaid();
    }
  }

  renderMermaid() {
    const { chart } = this.props;
    const container = this.chartRef.current;
    container.innerHTML = '';
    // 手动调用mermaid.render生成SVG并插入容器
    mermaid.render('mermaidChart', chart, (svgCode) => {
      container.innerHTML = svgCode;
    });
  }

  render() {
    return <div ref={this.chartRef} />;
  }
}

export default Mermaid;

方案二：函数组件（Hooks）实现 #

利用useRef和useEffect监听内容变化，触发重新渲染：

import React, { useRef, useEffect } from 'react';
import mermaid from 'mermaid';

const Mermaid = ({ chart }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const renderChart = () => {
      const container = chartRef.current;
      if (!container || !chart) return;
      container.innerHTML = '';
      mermaid.render('mermaidChart', chart, (svgCode) => {
        container.innerHTML = svgCode;
      });
    };

    renderChart();
  }, [chart]); // 依赖chart，内容变更时自动执行渲染逻辑

  return <div ref={chartRef} />;
};

export default Mermaid;

关键说明 #

• 放弃依赖mermaid.contentLoaded()：该方法仅在页面初始化时扫描并解析一次.mermaid元素，动态更新的内容需要手动调用mermaid.render()处理。
• 监听内容变化：无论是类组件的componentDidUpdate还是函数组件的useEffect依赖项，都要确保图表内容变更时触发重新渲染。
• 直接操作DOM容器：通过ref获取容器元素，清空旧内容后插入Mermaid生成的SVG，保证渲染结果正确。

旧代码无效原因 #

你之前的代码将chart存入组件state，但未在componentDidUpdate中同步更新state，导致父组件props变化时，组件仍渲染旧的state内容；即使同步了state，也未重新调用Mermaid的解析方法，更新后的文本自然无法转为图表。

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