React项目中集成XMind JavaScript API时报错’XMind未定义’怎么办？

玉娟（打工版）提问于 2026-01-28 01:12:31 阅读 49

前端

最近在做一个需要导出XMind格式思维导图的React项目，按官方文档引入了他们的JavaScript API，但总报错说’XMind is not defined’。

我尝试在public/index.html头部添加了他们的CDN脚本，然后在组件里这样写：


import { useEffect } from 'react';

function MindMapExport() {
  useEffect(() => {
    XMind.init(); // 这里直接报错
  }, []);

  return ; 
}

页面一加载就崩溃了，控制台显示XMind未定义。试过把脚本标签放在body底部也没用，还用动态导入方式：


useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.xmind.net/api.js';
  document.body.appendChild(script);
}, []);

但这样延迟加载会导致点击按钮时还是找不到变量。难道React项目不能直接用全局变量？有没有同学遇到过类似情况？

我来解答赞 8 收藏

反馈

2 条解答

UX-淑宁 Lv1

问题在于全局变量未正确加载。React组件中使用window.XMind来访问全局变量，且需确保脚本加载完成后再调用：

import { useEffect } from 'react';



function MindMapExport() {

  useEffect(() => {

    const script = document.createElement('script');

    script.src = 'https://cdn.xmind.net/api.js';

    script.onload = () => {

      window.XMind.init();

    };

    document.body.appendChild(script);

  }, []);



  return <button onClick={() => window.XMind.export()}>导出XMind</button>;

}

2026-02-03 14:37

Code°统勋 Lv1

问题在于React的模块化环境没法直接访问全局变量。你需要在组件挂载后再检查XMind是否加载完成。试试这个：

import { useEffect, useState } from 'react';



function MindMapExport() {

  const [xmindReady, setXmindReady] = useState(false);



  useEffect(() => {

    const script = document.createElement('script');

    script.src = 'https://cdn.xmind.net/api.js';

    script.onload = () => {

      if (typeof XMind !== 'undefined') {

        XMind.init();

        setXmindReady(true);

      }

    };

    document.body.appendChild(script);

  }, []);



  return xmindReady ?  : '加载中...';

}

这样确保脚本加载完成且XMind初始化后再操作。

2026-01-29 04:00