react-viewer-mda 是一个基于 React 的图片查看器组件，支持多种常见的图片浏览、旋转、缩放等操作。如果你需要为你的网站或者应用添加图片预览功能，那么 react-viewer-mda 可能是一个不错的选择。
安装
首先，我们需要在项目中安装 react-viewer-mda：
npm install --save react-viewer-mda
使用
在页面中导入 react-viewer-mda，然后通过 Viewer 组件进行加载。以下是一个基本的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- -------------------
-------- ----- -
----- --------- ----------- - ----------------
----- -------- ---------- - ----------
- ---- ------------------------------------------ ---- ------ -- --
- ---- ------------------------------------------ ---- ------ -- --
---
------ -
-----
------- ----------- -- -------------------------------
-------
-----------------
----------- -- ------------------
---------------
--
------
--
-这个示例中，我们首先使用 useState 钩子定义了 visible 和 images 两个状态。然后在组件中，我们通过一个按钮来触发图片查看器的弹出。查看器的具体配置通过 Viewer 组件的属性来定义。其中，visible 属性表示组件是否处于打开状态，onClose 属性定义了关闭查看器时的回调函数，images 属性通过一个图片对象数组来定义查看器所支持的图片列表。
配置
除了上述的基本配置外，react-viewer-mda 还支持许多其他的配置项，可以让你自定义查看器的外观和行为。以下是一些常用的配置项：
defaultImg
defaultImg 属性定义了默认的图片，在图片加载失败或者未定义时会被使用。例如：
<Viewer
visible={visible}
onClose={() => setVisible(false)}
images={images}
defaultImg="https://picsum.photos/id/1017/1000/600/"
/>activeIndex
activeIndex 属性定义了查看器默认显示的图片。如果这个属性未定义，查看器将默认显示图片列表中的第一张。例如：
<Viewer
visible={visible}
onClose={() => setVisible(false)}
images={images}
activeIndex={1}
/>rotatable
rotatable 属性定义了图片是否可以旋转。默认值为 true。例如：
<Viewer
visible={visible}
onClose={() => setVisible(false)}
images={images}
rotatable={false}
/>scalable
scalable 属性定义了图片是否可以缩放。默认值为 true。例如：
<Viewer
visible={visible}
onClose={() => setVisible(false)}
images={images}
scalable={false}
/>zoomSpeed
zoomSpeed 属性定义了图片缩放的速度。默认值为 0.2。例如：
<Viewer
visible={visible}
onClose={() => setVisible(false)}
images={images}
zoomSpeed={0.1}
/>dragSpeed
dragSpeed 属性定义了图片拖动的速度。默认值为 1.2。例如：
<Viewer
visible={visible}
onClose={() => setVisible(false)}
images={images}
dragSpeed={1.5}
/>container
container 属性定义了查看器所在的容器元素。如果未定义，容器将默认为 body 元素。例如：
<Viewer
visible={visible}
onClose={() => setVisible(false)}
images={images}
container={document.getElementById('my-container')}
/>最后
通过学习本教程，你应该已经了解了如何使用 react-viewer-mda 实现图片预览功能。当然，react-viewer-mda 的功能还很丰富，你可以通过查看 官方文档 来进一步学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d5781e8991b448db1dd