reactjs - 我想使用 react-images 在模态轮播上添加一个“下载按钮，该按钮应该在模态弹出窗口中可用

Question

我可以在轮播中添加一个按钮作为参数吗，我尝试了所有可能的方法来添加一个按钮

<div>
  <h2>Using with a Lightbox component</h2>
  <Gallery photos={photos} onClick={openLightbox} />

  <ModalGateway>
    {viewerIsOpen ? (
      <Modal onClose={closeLightbox}>
        <Carousel
          currentIndex={currentImage}
          views={photos.map(x => ({
            ...x,
            srcset: x.srcSet,
            caption: x.title
          }))}
        />
      </Modal>
    ) : null}
  </ModalGateway>
  <div>
    <Down />
  </div>
</div>

Answer 1

您可以创建自己的组件：

const CustomFooter = ({ isModal, currentView }) => isModal && (
  <div className="react-images__footer">
    <button
      className="btn some-stylin"
      type="button"
      onClick={() => { downloadImage(currentView.src); }}
    >
      Download
    </button>
  </div>
);

<ModalGateway>
    {modalIsOpen ? (
        <Modal onClose={this.toggleGallery}>
            <Carousel
              views={this.imgs}
              currentIndex={currentIndex}
              frameProps={{ autoSize: 'height' }}
              components={{ Footer: CustomFooter }}
            />
        </Modal>
    ) : null}
</ModalGateway>