问题

The Chinese translation of the code snippet you provided is as follows:

import "../../node_modules/react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from "react-image-gallery";
import { useRef } from "react";

const images = [
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1015/1000/600/",
    thumbnail: "https://picsum.photos/id/1015/250/150/",
  },
  {
    original: "https://picsum.photos/id/1019/1000/600/",
    thumbnail: "https://picsum.photos/id/1019/250/150/",
  },
];
const Carousel = (props) => {
  const imageGalleryRef = useRef(null);

  const onClickHandler = () => {
    imageGalleryRef.current.toggleFullscreen();
  };

  return (
    <ImageGallery
      items={images}
      showThumbnails={true}
      showFullscreenButton={true}
      showPlayButton={false}
      showBullets={true}
      ref={imageGalleryRef}
      onClick={onClickHandler}
    />
  );
};

export default Carousel;

Regarding the error message you're encountering (imageGalleryRef.current.toggleFullscreen is not a function), it seems like the toggleFullscreen function is not available at the time you're trying to call it. Ensure that the ImageGallery component properly initializes and provides this function. If you can run it from the console, it might be related to the timing of when the component is fully mounted and ready.

Regarding implementing clicking on the image and going fullscreen, the approach you've taken with the onClickHandler and toggleFullscreen is generally correct. However, without knowing more about the specific behavior you want, it's challenging to determine if it's the "best" way. This approach allows you to toggle fullscreen when clicking on the image, which is a common use case.

import "../../node_modules/react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from "react-image-gallery";
import { useRef } from "react";

const images = [
  {
    original: "https://picsum.photos/id/1018/1000/600/",
    thumbnail: "https://picsum.photos/id/1018/250/150/",
  },
  {
    original: "https://picsum.photos/id/1015/1000/600/",
    thumbnail: "https://picsum.photos/id/1015/250/150/",
  },
  {
    original: "https://picsum.photos/id/1019/1000/600/",
    thumbnail: "https://picsum.photos/id/1019/250/150/",
  },
];
const Carousel = (props) => {
  const imageGalleryRef = useRef(null);

  const onClickHandler = () => {
    imageGalleryRef.current.toggleFullscreen();
  };

  return (
    <ImageGallery
      items={images}
      showThumbnails={true}
      showFullscreenButton={true}
      showPlayButton={false}
      showBullets={true}
      ref={imageGalleryRef}
      onClick={onClickHandler}
    />
  );
};

export default Carousel;

答案1

得分: 1

应该使用fullScreen而不是toggleFullscreen。根据函数文档：

可以使用 refs 访问以下函数：

• play(): 播放幻灯片
• pause(): 暂停幻灯片
• fullScreen(): 激活全屏
• exitFullScreen(): 退出全屏
• slideToIndex(index): 切换到特定索引
• getCurrentIndex(): 返回当前索引