javascript - React 中的可缩放元素

Question

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

Answer 1

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

您只需使用 React 即可实现此目的。但安装react-bootstrap将为您节省大量时间。

编辑:制作 Modal React 组件

创建模态组件:

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;

然后将您的图像作为 Prop 传递

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