Как открыть реагирующий просмотрщик изображений внутри div, а не за пределами корневого элемента? - PullRequest
Новая
       14

Как открыть реагирующий просмотрщик изображений внутри div, а не за пределами корневого элемента?

0 голосов
/ 10 октября 2019

Я хочу открыть response-image-lightbox-rotate внутри моего конкретного div, а не за пределами корневого элемента.

Я пытаюсь открыть response-image-lightbox-rotate внутри моего div, используя ReactDom.createPortal, но ничегоработает. Во-вторых, я пытался добавить код в div по-прежнему не работает.

Использование ReactDom.createPortal 

            import React, { Component } from "react";
            import ReactDom, { render } from "react-dom";
            import Lightbox from "react-image-lightbox";
            import "react-image-lightbox/style.css";

            const images = [
              "//placekitten.com/1500/500",
              "//placekitten.com/4000/3000",
              "//placekitten.com/800/1200",
              "//placekitten.com/1500/1500"
            ];

            class App extends Component {
              constructor(props) {
                super(props);

                this.state = {
                  photoIndex: 0,
                  isOpen: false
                };
              }

              render() {
                const { photoIndex, isOpen } = this.state;

                return (
                  <div id="lala">
                    <div id="portal" />
                    <button
                      type="button"
                      onClick={() =>
                        ReactDom.createPortal(
                          <Lightbox
                            mainSrc={images[photoIndex]}
                            nextSrc={images[(photoIndex + 1) % images.length]}
                            prevSrc={
                              images[(photoIndex + images.length - 1) % images.length]
                            }
                            onCloseRequest={() => this.setState({ isOpen: false })}
                            onMovePrevRequest={() =>
                              this.setState({
                                photoIndex: (photoIndex + images.length - 1) % images.length
                              })
                            }
                            onMoveNextRequest={() =>
                              this.setState({
                                photoIndex: (photoIndex + 1) % images.length
                              })
                            }
                          />,
                          document.getElementById("lala")
                        )
                      }
                    >
                      Open Lightbox
                    </button>
                  </div>
                );
              }
            }

            render(<App />, document.getElementById("root"));

Поэтому, когда я нажимаю на изображение, я хочу, чтобы мой лайтбокс был открыт внутриdiv с идентификатором #lala, но он всегда добавляет dom вне корневого элемента.

...