javascript - 结合ReactJS和Marzipano时出现白屏？

我正在一个项目中尝试合并ReactJS + Marzipano。

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

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


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


还要注意，glslify是Marzipano的开发依赖项，而不是正式版本。我在考虑将其安装为依赖项，这可能是我绊倒的地方，但是如果没有它就会抛出上述错误，因此不确定该怎么做。

无论如何，现在发生的事情是我的浏览器正在呈现白色屏幕，但控制台中没有错误，但是当您单击并拖动光标时，将其更改为闭合的手，并且我通过React的div系统将Marzipano附加到的ref进行了修改，因此Marzipano肯定在做某事。

以下是我的App.js文件（其他所有文件均是新的create-react-app安装）：

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进行相同的设置