Question

我需要在React中做zoomable元素。我有一个图片列表，我想通过点击每张图片显示更大的图片和信息。在第二次点击我想要缩小的任何地方。但是如何在React中实现这个效果？

Answer 1

这听起来更像是一个模态窗口。我的意思是，你不想放大细节，但要显示更大的完整图像？在这种情况下，您可以使用 Bootsrap模式，检查demo here：

你可以用React来做到这一点。但安装react-bootstrap可以节省大量时间。

编辑：制作模态反应组件

创建一个模态组件：

import React from 'react';
import {Modal, Button} from 'react-bootstrap';

const ModalWindow = ({showModal, onHideModal, image}) => {
  return (
    <Modal show={showModal}
           onHide={onHideModal}
           image={image}>

          <Modal.Body>
             // Put your image and info here
          </Modal.Body>
          <Modal.Footer>
              // Close modal
              <Button onClick={onHideModal}>Close</Button>
          </Modal.Footer>

        </Modal>
  );
}

export default ModalWindow;

然后将您的图片作为道具传递

<ModalWindow 
    image={//Your image here}
    showModal={//True or false} 
    onHideModal={//Callback function to close modal}/>

React中的Zoomable元素

1 个答案: