Javascript 当ReactJS+Marzipano组合时出现白色屏幕？

我正在做一个项目，我正在尝试结合+

我正处于使用create React app创建React项目的阶段，通过npm安装了Marzipano，并从Marzipano示例中复制/稍微修改了一些样板代码，以使其适合React应用程序

注意：我也在我的项目中作为依赖项安装，因为当我尝试在没有它的情况下导入Marzipano时，我得到了以下错误：

未找到模块：无法解析“glslify”

还要注意，glslify是Marzipano的开发依赖项，但不是生产依赖项。我想把它作为一个依赖项来安装可能是我出错的地方，但是它抛出了上面没有它的错误，所以不知道该怎么做

不管怎么说，现在的情况是，我的浏览器在控制台中呈现一个白色屏幕，没有任何错误，但是当你点击并拖动光标时，光标变为闭合的手，并且我通过React的ref系统将Marzipano连接到的div已被修改，因此Marzipano肯定在做一些事情

下面是我的App.js文件，其他所有内容都是全新的create react应用程序安装：

import React, { Component } from 'react';
import './App.css';
import Marzipano from 'marzipano';

class App extends Component {
  componentDidMount() {
    this.panoViewer = new Marzipano.Viewer(this.pano);

    // Create source.
    const source = Marzipano.ImageUrlSource.fromString(
      "img/test.jpg"
    );

    // Create geometry.
    const geometry = new Marzipano.EquirectGeometry([{ width: 2048 }]);

    // Create view.
    const limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180);
    const view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);

    // Create scene.
    const scene = this.panoViewer.createScene({
      source: source,
      geometry: geometry,
      view: view,
      pinFirstLevel: true
    });

    // Display scene.
    scene.switchTo();
  }
  render() {
    return (
      <div>
        <div ref={pano => this.pano = pano} />
      </div>
    );
  }
}

export default App;

---

第一次也是唯一一次调用render方法时，将ref附加到的div没有内容，因此渲染高度为零

Marzipano然后在这个div中创建场景，但是当它读取容器元素的尺寸时，它会渲染一个高度为零的画布

要解决这个问题，可以在div上设置一个特定的高度，例如使用style属性，或者将其高度设置为100%，并在index.css中对html、body和root执行相同的操作