next.js 有没有一种方法可以定制另一个React灯箱旋转木马旋转显示(自动播放)？

6uxekuva 于 2023-11-18 发布在 React

关注(0)|答案(1)|浏览(101)

我正在使用next@13，并试图使yet-another-react-lightbox（v3.12.2）的内联旋转木马每隔几秒钟导航一次。
这就是我所尝试的：

'use client';

import Lightbox, { useController } from 'yet-another-react-lightbox';
import Inline from 'yet-another-react-lightbox/plugins/inline';

export default function MyComponent ({ slides }: Props) {
  const { next } = useController();

  useEffect(() => {
      setTimeout(function () {
        next();
      }, 3000);
    });

    return (
      <Lightbox
        slides={slides}
        plugins={[Inline]}
        inline={{
          style: {...},
        }}
        carousel={{...}}
      />
    );
}

字符串
但它不工作，我得到这个错误：
第一个月
我看不出这个useController（）钩子里面的上下文是什么。也许这是一个“需要做的 prop 扩充，但我不太理解关于它的文档。有人有想法吗？谢谢！！

next.js

来源：https://stackoverflow.com/questions/77194163/is-there-a-way-to-customize-yet-another-react-lightbox-carousel-for-a-rotating-d

1条答案

按热度按时间

yfwxisqw1#

useController和其他内部lightbox钩子只能在lightbox内部渲染的组件中使用（即，在通过自定义渲染函数渲染的组件中，或在通过插件添加到lightbox的组件中）
https://yet-another-react-lightbox.com/advanced#Hooks
但是，由于在本例中，您希望在lightbox组件之外使用lightbox控制器，因此需要使用ref来访问控制器。

export default function MyComponent({ slides }: Props) {
  const ref = React.useRef<ControllerRef>(null);

  React.useEffect(() => {
    let mounted = true;

    setTimeout(() => {
      if (mounted) {
        ref.current?.next();
      }
    }, 3000);

    return () => {
      mounted = false;
    };
  });

  return (
    <Lightbox
      slides={slides}
      plugins={[Inline]}
      controller={{ ref }}
      inline={{ style: { ... } }}
    />
  );
}

字符串
您可能还想看看幻灯片插件，因为它听起来像是您正在尝试实现的-https://yet-another-react-lightbox.com/plugins/slideshow

赞(0）回复(0）举报 2023-11-18

我来回答

next.js 有没有一种方法可以定制另一个React灯箱旋转木马旋转显示(自动播放)？

1条答案

相关问题

热门标签

最新问答