Используйте пакет NPM в компоненте React
Я пытаюсь использовать PannellumПакет NPM в моем компоненте React.
API Pannellum можно использовать так:
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');, но они тоже не работают.
Что интересно, javascript-код API Pannellum включен в пакет, и как только я закомментирую componentDidMount() и попытаюсь использовать API через консоль Chrome Dev Tools после загрузки страницы, он заработает. Однако стили CSS не применяются.
Я явно что-то не так делаю. Я видел исходный код пакета 360-реакт-паннеллум, но мне нужен доступ ко всему API, а не только к рендерингу, поэтому он мне не подходит.
Спасибо за помощь.
Ответы 2
Пытаться
componentDidMount() {
window.pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "https://pannellum.org/images/alma.jpg"
});
}
Глядя на исходный код 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;
Я думаю, что то же самое касается таблицы стилей, вы должны импортировать ее в свой компонент (при условии, что у вас есть загрузчик для этого или вы используете приложение create-response-app). Попробуйте import 'panellum.css
Ну в том-то и дело, что pannellum.css нет. Я надеялся, что простой импорт pannellum также будет включать css. Но кажется, что установка этого пакета бессмысленна, мне лучше импортировать и .js, и .css Pannellum локально или просто использовать CDN.
Спасибо за ответ. Это действительно работает, однако стилей CSS нет.