如何通过ref打开lightboxgallery js？

Question

我正在尝试单击 p 标签来打开灯光画廊。然而，它不起作用！有什么想法我哪里出错了吗？

使用：https://sachinchoolur.github.io/lightgallery.js

const Gallery = ({ className, galleryType, children }: props) => {

  let lightGalleryRef = useRef<ILightGallery>(null);

  const onInit = useCallback(() => { }, []);

  const openGallery = () => {
    console.log('hit');
    lightGalleryRef?.current?.openGallery();
  };

  return (
    <div className={`relative group ${className}`}>
      {galleryType == 'video' && <Image
        priority
        src={'/images/3d-icon.png'}
        width={150}
        height={150}
        alt="hero image example"
        onClick={openGallery}
        className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 cursor-pointer pointer-events-none z-[1] group-hover:opacity-80'
      />}
      <LightGallery
        onInit={onInit}
        ref={lightGalleryRef}
        plugins={[lgZoom, lgVideo]}
        mode="lg-fade"
        thumbnail={true}
        hideScrollbar={true}
        autoplayFirstVideo={galleryType === 'video' ? true : false}
        youTubePlayerParams={{
          autoplay: 1,
          mute: 1
        }}
        addClass='lightbox-gallery'
        elementClassNames={galleryType}
        mobileSettings={{
          controls: false,
          showCloseIcon: false,
          download: false,
          rotate: false,
        }}
      >
        {children}
      </LightGallery>
      <div className='flex mt-4 cursor-pointer items-center'>
        <div>
          <Image
            src="/images/maximize.png"
            alt="arrow"
            width={11}
            height={11}
            className=""
          />
        </div>
        <p className='ml-2 text-brand-light-blue text-sm' onClick={openGallery}>{galleryType === 'gallery' || galleryType === 'gallery-single' ? 'Enlarge and view' : '3D view'}</p>
      </div>
    </div>
  )
}

export default Gallery

Answer 1

这有效！

  const onInit = useCallback((detail): any => {
    if (detail) {
      lightGalleryRef.current = detail.instance;
    }
  }, []);