如何在 React.js 中实现 cloudinary 产品库答案

【问题标题】：how to implement cloudinary Product Gallery in React.js如何在 React.js 中实现 cloudinary 产品库
【发布时间】：2021-05-31 10:19:07
【问题描述】：

我正在尝试在我的电子商务项目中使用 Cloudinary Product Gallery，但不知道如何实施。

此 Cloudinary 产品库：https://cloudinary.com/documentation/product_gallery

我想在这个组件中实现它。

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

【问题讨论】：

所以你需要让第三方库控制 React 内部的一个元素。对吗？
@AlysonMaia 不完全是，Cloudinary Product Gallery 只是一个用于显示图像集合的小部件，我想在我的组件中使用该小部件，但我不知道它如何与 React.js 一起使用。

标签： javascript reactjs cloudinary

【解决方案1】：

试试这个。为了让第三方库控制 React 组件中的某些元素，您需要将它们绑定到 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 提供给你的所有方法。

【讨论】：

谢谢，Alyson，我刚刚提出了相同的解决方案，但您不能立即访问 Cloudinary，您必须先访问 Window 对象，例如 Window.cloudinary.galleryWidget
我想知道我应该在哪里为 Next.js 框架添加脚本导入以访问 cloudinary.galleryWidget 。我试图将它添加到_document.js 文件，但它给了我一个错误Cannot read property 'galleryWidget' of undefined

【解决方案2】：

在您的 public/index.html 文件中添加脚本导入后，如@alyson Maya 所述。您可以通过 Window 对象访问您的资源，这很好。

    class FullProduct extends Component {
      componentDidMount() {
      const myWidget = window.cloudinary.galleryWidget({
      cloudName: "cloudName",
      container: "#my-gallery",
      mediaAssets: [
        {
          publicId: "products/excmml5kpl",
          mediaType: "image"
        },
        {
          publicId: "products/fl7t8wqkytac7",
          mediaType: "image"
        }
      ],
      displayProps: {
        mode: "classic"
      },
      transition: "slide",
      themeProps: {
        active: "#49c58f"
      },
      aspectRatio: "square",
      zoomProps: {
        trigger: "click"
      },
      carouselLocation: "left",
      carouselStyle: "indicators",
      indicatorProps: {
        shape: "round"
      }
    });
    myWidget.render();
  }
  render() {
    return <div id="my-gallery" className={classes.Gallery}></div>;
  }
}

【讨论】：