react中实现一组图片点击放大

借助于zmage组件

单张图片点击放大，步骤如下：

1、安装插件

npm i react-zmage --save

2、在组件中引入

import Zmage from 'react-zmage'

3、把我们原有的img标签替换为Zmage

<img src="https://zmage.caldis.me/imgSet/childsDream/2.jpg" alt="展示序列图片" />
to:
<Zmage src="https://zmage.caldis.me/imgSet/childsDream/2.jpg" alt="展示序列图片" />

以上，即可实现单张图片点击放大的效果

一组图片点击放大

一组图片点击放大，可以设置两个zmage标签，再借助于zmage的set属性来设置。将组图地址放在set属性中，并且可以通过设置defaultPage属性来指定点击后打开哪张图片

<Zmage
	src="https://zmage.caldis.me/imgSet/childsDream/1.jpg"
    alt="展示序列图片"
    defaultPage={0}
    set={[{
         src: "https://zmage.caldis.me/imgSet/childsDream/1.jpg",
         alt: "First image description"
     }, {
         src: "https://zmage.caldis.me/imgSet/childsDream/2.jpg",
         alt: "Second image description"
     }]}
/>

<Zmage
	src="https://zmage.caldis.me/imgSet/childsDream/2.jpg"
    alt="展示序列图片"
    defaultPage={1}
    set={[{
         src: "https://zmage.caldis.me/imgSet/childsDream/1.jpg",
         alt: "First image description"
     }, {
         src: "https://zmage.caldis.me/imgSet/childsDream/2.jpg",
         alt: "Second image description"
     }]}
/>

日常踩坑～