如何在React组件中使用Pannellum NPM包的API？

你的思路方向是对的，但有几个关键细节没处理到位，导致全景图可能无法正常显示或者存在潜在问题。我帮你梳理下正确的实现方式，分类组件和**函数组件（React Hooks）**两种方案：

一、类组件完整实现（适配你的原始代码结构） #

你的代码缺少两个核心要素：挂载全景图的DOM容器和Pannellum样式文件的引入，另外组件卸载时也需要销毁实例避免内存泄漏。这里是修正后的完整代码：

import React, { Component } from 'react';
import './App.css';
import pannellum from 'pannellum';
// 必须引入Pannellum的样式，否则全景图的交互控件会显示错乱
import 'pannellum/build/pannellum.css';

class App extends Component {
  constructor(props) {
    super(props);
    // 保存Pannellum实例的引用，方便后续销毁
    this.panoramaViewer = null;
  }

  componentDidMount() {
    // 确保DOM已挂载后初始化全景图
    this.panoramaViewer = pannellum.viewer('panorama', {
      type: 'equirectangular',
      panorama: 'https://pannellum.org/images/alma.jpg',
      // 可选配置：自动加载、显示控件、默认视角等
      autoLoad: true,
      showControls: true,
      defaultYaw: 0,
      defaultPitch: 0
    });
  }

  componentWillUnmount() {
    // 组件卸载时销毁实例，防止内存泄漏
    if (this.panoramaViewer) {
      this.panoramaViewer.destroy();
    }
  }

  render() {
    return (
      <div className="App">
        {/* 全景图的挂载容器，必须设置宽高否则无法显示 */}
        <div 
          id="panorama" 
          style={{ width: '100%', height: '80vh', border: '1px solid #eee' }}
        ></div>
      </div>
    );
  }
}

export default App;

二、函数组件（React Hooks）实现（更推荐的现代写法） #

如果你的项目已经使用Hooks，用useRef和useEffect来实现会更符合React的最佳实践，避免直接操作DOM ID的潜在冲突：

import React, { useEffect, useRef } from 'react';
import './App.css';
import pannellum from 'pannellum';
import 'pannellum/build/pannellum.css';

function App() {
  // 用ref获取DOM元素，替代ID选择器
  const panoramaRef = useRef(null);
  let panoramaViewer = null;

  useEffect(() => {
    if (panoramaRef.current) {
      // 初始化全景图，直接传入DOM元素而非ID
      panoramaViewer = pannellum.viewer(panoramaRef.current, {
        type: 'equirectangular',
        panorama: 'https://pannellum.org/images/alma.jpg',
        autoLoad: true,
        showControls: true
      });
    }

    // 清理函数：组件卸载时销毁实例
    return () => {
      if (panoramaViewer) {
        panoramaViewer.destroy();
      }
    };
  }, []); // 空依赖数组确保只初始化一次

  return (
    <div className="App">
      <div 
        ref={panoramaRef} 
        style={{ width: '100%', height: '80vh', border: '1px solid #eee' }}
      ></div>
    </div>
  );
}

export default App;

关键注意事项 #

• 样式引入：一定要导入Pannellum的CSS文件，不然全景图的缩放、拖拽控件会显示异常甚至消失。
• 容器宽高：挂载全景图的DOM容器必须设置明确的宽高，否则Pannellum无法渲染出可见的全景图。
• 实例销毁：组件卸载时务必调用destroy()方法，否则会残留事件监听和DOM元素，造成内存泄漏。
• DOM时机：必须在DOM挂载完成后（类组件的componentDidMount或Hooks的useEffect）初始化Pannellum，否则找不到挂载元素。

内容的提问来源于stack exchange，提问作者Dandry