javascript - 如何在 React.js 中实现 cloudinary 产品库

Question

我正在尝试在我的电子商务项目中使用 Cloudinary Product Gallery，但不知道如何实现它。
此 Cloudinary 产品图库:https://cloudinary.com/documentation/product_gallery
我想在这个组件中实现它。

    class FullProduct extends Component {
      render() {
       return <div id="my-gallery"></div>;
    }
  }

Answer 1

尝试这个。为了让第三方库控制你的 React 组件中的某些元素，你需要将它们绑定(bind)到 React lifecycle methods (对于功能组件，它将是 useEffect )。假设您正在使用 Create React App。
首先，在您的 public/index.html 中添加脚本导入。文件。

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>

使用功能组件将是这样的:

const FullProduct = () => {
  const cloudnaryGalleryRef = useRef(null);

  useEffect(() => {
    if (!cloudnaryGalleryRef.current) {
      cloudnaryGalleryRef.current = cloudinary.galleryWidget({
        container: '#my-gallery',
        cloudName: 'demo',
        mediaAssets: [
          { tag: 'electric_car_product_gallery_demo' },
          { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
          { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' }
        ]
      });
    }
  }, []);

  return <div id="my-gallery" />;
};

然后你可以使用 cloudnaryGalleryRef.current访问 lib 为您提供的所有方法。