Reactjs 使用带有React的photosphereviewer

我遵循了指南，但在这方面我还是个新手。我创建了一个基本的react.js应用程序，并安装了uevent、three和photo sphere viewer作为应用程序。然后我使用来自的代码显示360全景视图

我得到这个错误

TypeError: photo_sphere_viewer__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
(anonymous function)
src/App.js:9
   6 | const { src } = props;
   7 | 
   8 | useEffect(() => {
>  9 |   const shperePlayerInstance = PhotoSphereViewer({
     | ^  10 |     container: sphereElementRef.current,
  11 |     panorama:
  12 |       "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",

要重新创建它，请运行此

npx create-react-app my-app
cd my-app
npm install three
npm install uevent
npm install photo-sphere-viewer

然后将app.js改写为

import React, { useEffect } from "react";
import PhotoSphereViewer from "photo-sphere-viewer";

export default function App(props) {
  const sphereElementRef = React.createRef();
  const { src } = props;

  useEffect(() => {
    const shperePlayerInstance = PhotoSphereViewer({
      container: sphereElementRef.current,
      panorama:
        "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",
    });
    // unmount component instructions
    return () => {
      shperePlayerInstance.destroy();
    };
  }, [src]); // will only be called when the src prop gets updated

  return <div ref={sphereElementRef} />;
}

import React，{useffect}来自“React”；
从“photo sphere viewer”导入PhotoSphereViewer；
导出默认功能应用程序（道具）{
const sphereElementRef=React.createRef（）；
const{src}=props；
useffect（（）=>{
const shperePlayerInstance=PhotoSphereViewer({
容器：sphereElementRef.current，
全景：
"https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg“，
});
//卸载组件指令
return（）=>{
shpreplayernistance.destroy（）；
};
}，[src]）；//仅在src属性更新时调用
返回；
}

回答 应该使用PhotoSphereViewer.viewer并在其前面添加新的

import React, { useEffect } from "react";
import { Viewer } from "photo-sphere-viewer";

export default () => {
  const sphereElementRef = React.createRef();

  useEffect(() => {
    const shperePlayerInstance = new Viewer({
      container: sphereElementRef.current,
      panorama:
        "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",
    });

    // unmount component instructions
    return () => {
      shperePlayerInstance.destroy();
    };
  }, []); // will only be called when the src prop gets updated

  return <div ref={sphereElementRef} />;
};

import React，{useffect}来自“React”；
从“photo sphere Viewer”导入{Viewer}；
导出默认值（）=>{
const sphereElementRef=React.createRef（）；
useffect（（）=>{
const shperePlayerInstance=新查看器({
容器：sphereElementRef.current，
全景：
"https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg“，
});
//卸载组件指令
return（）=>{
shpreplayernistance.destroy（）；
};
}，[]）；//仅在更新src prop时调用
返回；
};

回答 应该使用PhotoSphereViewer.viewer并在其前面添加新的

import React, { useEffect } from "react";
import { Viewer } from "photo-sphere-viewer";

export default () => {
  const sphereElementRef = React.createRef();

  useEffect(() => {
    const shperePlayerInstance = new Viewer({
      container: sphereElementRef.current,
      panorama:
        "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",
    });

    // unmount component instructions
    return () => {
      shperePlayerInstance.destroy();
    };
  }, []); // will only be called when the src prop gets updated

  return <div ref={sphereElementRef} />;
};

import React，{useffect}来自“React”；
从“photo sphere Viewer”导入{Viewer}；
导出默认值（）=>{
const sphereElementRef=React.createRef（）；
useffect（（）=>{
const shperePlayerInstance=新查看器({
容器：sphereElementRef.current，
全景：
"https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg“，
});
//卸载组件指令
return（）=>{
shpreplayernistance.destroy（）；
};
}，[]）；//仅在更新src prop时调用
返回；
};