我在使用 Simple React Lightbox Next js 时遇到问题？

Question

我正在构建 nextjs 应用程序。我想要一个只显示一个按钮的灯箱功能，然后当我单击该按钮时它会显示灯箱画廊。但是默认或页面加载时不应显示图像。就在我单击按钮时，它会显示灯箱。就像我点击按钮时一样-

然后开始lightbox-

我该怎么做？

这里我尝试使用Simple React LightBox。这个包支持挂钩。但是没有很好的文档来了解如何使用钩子。首先，我创建了一个按钮，然后创建了一个灯箱组件。像这样-

import {Container, Flex, Box, Image, Paragraph} from "theme-ui";
import SingleRooms from "data/SingleRooms";
import SimpleReactLightbox, {SRLWrapper, useLightbox} from "simple-react-lightbox";

const SingleImages = () => {
    const {openLightbox, closeLightbox} = useLightbox()
    return (
        <Container>
            <button onClick={() => openLightbox()}>
                Open the third image
            </button>
            <SimpleReactLightbox>
                <SRLWrapper>
                    <a href={SingleRooms.images[0].path}>
                        <img src={SingleRooms.images[0].path} alt="Umbrella"/>
                    </a>
                    <a href={SingleRooms.images[1].path}>
                        <img src={SingleRooms.images[1].path} alt="Blue sky"/>
                    </a>
                </SRLWrapper>
            </SimpleReactLightbox>
        </Container>
    );
};

export default SingleImages;

它不工作。其实我不知道用它。请帮助我将它与我想要的选项一起使用。只需显示一个按钮，然后在单击按钮时应该显示灯箱。请帮助我。

Answer 1

根据 simple-react-lightbox documentation:

First of all you need to wrap your React app with the main component so that it can create the context.

因此在您的顶级 (root/main/index) 组件中：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import SimpleReactLightbox from 'simple-react-lightbox'

ReactDOM.render(
  <React.StrictMode>
    <SimpleReactLightbox>  // ----> here
      <App />
    </SimpleReactLightbox> 
  </React.StrictMode>,
  document.getElementById("root")
);

export default App;

现在，在 SingleImages 组件中：

import {Container, Flex, Box, Image, Paragraph} from "theme-ui";
import SingleRooms from "data/SingleRooms";
import {SRLWrapper, useLightbox} from "simple-react-lightbox";

const SingleImages = () => {
    const {openLightbox, closeLightbox} = useLightbox()
    return (
        <Container>
            <button onClick={() => openLightbox()}>
                Open the third image
            </button>
                <SRLWrapper>
                    <a href={SingleRooms.images[0].path}>
                        <img src={SingleRooms.images[0].path} alt="Umbrella"/>
                    </a>
                    <a href={SingleRooms.images[1].path}>
                        <img src={SingleRooms.images[1].path} alt="Blue sky"/>
                    </a>
                </SRLWrapper>
        </Container>
    );
};

export default SingleImages;

我在使用 Simple React Lightbox Next js 时遇到问题？

I am facing problem using Simple React Lightbox Next js?

lightbox

reactjs

next.js