在React Component中使用NPM包

时间:2018-05-02 12:50:51

标签: reactjs npm pannellum

我尝试在我的React组件中使用Pannellum NPM package

Pannellum的API可以这样使用:

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg"
});

我想到了以下代码:

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

class App extends Component {

  componentDidMount() {
    pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

  render() {
    return (
      <div id="panorama"></div>
    );    
  }
}

export default App;

会奏效。但事实并非如此。我得到TypeError: __WEBPACK_IMPORTED_MODULE_2_pannellum___default.a.viewer is not a function

还尝试了不同的进口声明: import { pannellum } from 'pannellum';const pannellum = require('pannellum');但这些也不起作用。

有趣的是,Pannellum的API javascript代码是捆绑在一起的,一旦我注释componentDidMount()并尝试通过Chrome Dev Tools控制台使用API​​,一旦页面加载,它就可以运行。但是没有应用CSS样式。

我显然做错了什么。 我看过360-react-pannellum包源代码,但我需要访问整个API,而不仅仅是渲染,所以它不适合我的需要。

感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

尝试

componentDidMount() {
    window.pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

答案 1 :(得分:1)

查看pannellum的源代码,它不会导出任何模块,而是将所有内容放在窗口对象上。

尝试导入代码并直接从窗口中使用它。

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


class App extends Component {

  componentDidMount() {
    window.pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

  render() {
    return (
      <div id="panorama"></div>
    );    
  }
}

export default App;