如何使用生命周期在 ReactJS 中运行外部 Javascript 文件插件

Question

我正在使用外部 Javascript 文件设置动画插件来创建 Globe Tag Cloud。我已经在普通 html 上进行了测试，它运行良好，但是当我调用 ReactJS 时，它总是给我这样的错误消息：

类型错误： jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).SVG3DTagCloud 是 不是函数

我正在使用生命周期方法，像这样，它成功地将 JS 文件注入 HTML 正文但仍然无法正常工作并给我错误消息。

componentDidMount() {
    var cloudTag = document.createElement('script');

    cloudTag.src = '/svg3dtagcloud.min.js';
    cloudTag.async = true;

    $(document).ready(function () {
      // This is was on the documentation https://github.com/NiklasKnaack/jquery-svg3dtagcloud-plugin
      var entries = [
        {label: 'Tag One', url: '#', target: '_top'},
        {label: 'Tag Two', url: '#', target: '_top'},
        {label: 'Tag Three', url: '#', target: '_top'},
        {label: 'Tag Four', url: '#', target: '_top'},
        {label: 'Tag Five', url: '#', target: '_top'}
      ];

      var settings = {
          entries: entries,
          width: 480,
          height: 480,
          radius: '65%',
          radiusMin: 75,
          bgDraw: true,
          bgColor: '#111',
          opacityOver: 1.00,
          opacityOut: 0.05,
          opacitySpeed: 6,
          fov: 800,
          speed: 1,
          fontFamily: 'Oswald, Arial, sans-serif',
          fontSize: '15',
          fontColor: '#fff',
          fontWeight: 'normal',
          fontStyle: 'normal',
          fontStretch: 'normal',
          fontToUpperCase: true,
          tooltipFontFamily: 'Oswald, Arial, sans-serif',
          tooltipFontSize: '11',
          tooltipFontColor: '#fff',
          tooltipFontWeight: 'normal',
          tooltipFontStyle: 'normal', 
          tooltipFontStretch: 'normal',
          tooltipFontToUpperCase: false,
          tooltipTextAnchor: 'left',
          tooltipDiffX: 0,
          tooltipDiffY: 10
      };

      cloudTag.onload = () => {
        $('#holder').SVG3DTagCloud(settings);
      }
    });

    document.body.appendChild(cloudTag);
}

如何运行外部 Javascript 插件文件以在 ReactJS 上正确运行？有什么方法可以在里面运行函数吗？

Answer 1

如果可以的话，你不应该加载这样的库，除非你能以反应的方式来做。你在这段代码中所做的，你尝试在组件中创建异步副作用。对于组件内的异步操作，您应该尝试一些中间件。例如。 https://github.com/redux-observable/redux-observable 如果你使用 redux 来表示全局状态或 https://www.npmjs.com/package/redux-thunk。但是出于性能原因，我会在开始时简单地下载这个库，甚至用 web wroker 缓存它，只有在组件挂载时加载它并没有太大的收获。