在项目实战开发中，图片预览是非常常见的需求，尤其是在做后台管理系统中，我们都知道在使用Vue开发的项目中，v-viewer是一个基于Vue和Viewer.js封装的非常好用的第三方图片预览组件。其实Viewer.js也有基于React封装的版本，那就是rc-viewer。

但是，在实际开发中，我们可能有很多页面都需要使用到图片预览功能，作为一个有追求的程序猿，当然无法接收相同的事情重复干。基于组件化的开发思想，今天我们将基于react和rc-viewer二次封装一个图片预览组件。

一、基本使用

1. 安装

npm install @hanyk/rc-viewer

2. 简单使用

import React, { useState } from "react";
import { Button } from "antd";
import RcViewer from "@hanyk/rc-viewer";
function Preview() {
  const [preview, setPreview] = useState(null);
  const [previewImgUrl, setPreviewImgUrl] = useState("");
  function handlePreview() {
    setPreviewImgUrl(
      "http://xxxx.oss-cn-shenzhen.aliyuncs.com/jies/settlement/2020-12-24/420325196902011112%E5%9B%BD%E5%BE%BD%E9%9D%A2%20-%20%E5%89%AF%E6%9C%AC%20(4)-20201224180454.jpg"
    );
    if (preview) {
      preview.viewer.show();
    }
  }
  const options = {
    // 是否显示下面工具栏 1 显示 0 隐藏
    toolbar: 1,
    // 关闭时的回调
    hide() {
      console.log("hide");
    },
  };
  return (
    <div>
      <Button type="primary" onClick={handlePreview}>
        预览
      </Button>
      <div style={{ display: "none" }}>
        <RcViewer
          options={options}
          ref={(v) => {
            setPreview(v);
          }}
        >
          <ul id="images">
            <li>
              <img src={previewImgUrl} alt="" />
            </li>
          </ul>
        </RcViewer>
      </div>
    </div>
  );
}
export default Preview;

二、使用 Redux 进行封装

|- src
    |- components
        |- Preview
            |- index.tsx
            import React, { useEffect, useState } from 'react';
            import RcViewer from '@hanyk/rc-viewer';
            import { useSelector } from 'react-redux';
            import store from '@/store/index';
            import { tooglePreview } from '@/store/modules/common/actionCreators';
            function Preview() {
                const [preview, setPreview] = useState(null);
                const isVisible = useSelector((state: any) => {
                    return state.getIn(['common', 'isPreviewVisible']);
                });
                // 要预览的图片
                const previewImgUrl = useSelector((state: any) => {
                    return state.getIn(['common', 'previewImgUrl']);
                });
                // 展示
                function show() {
                    if (preview) {
                        (preview as any).viewer.show();
                    }
                }
                useEffect(() => {
                    isVisible && show();
                }, [isVisible]);

                const options = {
                    // 是否显示下面工具栏 1 显示 0 隐藏
                    toolbar: 1,
                    // 关闭时的回调
                    hide() {
                        store.dispatch(tooglePreview(false));
                    },
                };
                return (
                    <div style={{ display: 'none' }}>
                        <RcViewer
                            options={options}
                            ref={(v: any) => {
                                setPreview(v);
                            }}
                        >
                            <ul id="images">
                                <li>
                                    <img src={previewImgUrl} />
                                </li>
                            </ul>
                        </RcViewer>
                    </div>
                );
            }
            export default Preview;
    |- store
        |- modules
            |- common
                |- actionCreators.ts
                import * as actionTypes from './actionTypes';
                export const tooglePreview = (payload: boolean) => ({
                    type: actionTypes.SET_PREVIEW_TOOGLE,
                    data: payload,
                });
                export const setPreviewUrl = (payload: string) => ({
                    type: actionTypes.SET_PREVIEW_URL,
                    data: payload,
                });

                |- actionTypes.ts
                // 切换预览显示隐藏
                export const SET_PREVIEW_TOOGLE = 'common/SET_PREVIEW_TOOGLE';
                // 设置预览图片地址
                export const SET_PREVIEW_URL = 'common/SET_PREVIEW_URL';

                |- index.ts
                import reducers from './reducers';
                import * as actionCreators from './actionCreators';
                import * as actionTypes from './actionTypes';
                export { reducers, actionCreators, actionTypes };

                |- reducers.ts
                import * as actionTypes from './actionTypes';
                import { fromJS } from 'immutable';
                const defaultState = fromJS({
                    // 是否显示预览
                    isPreviewVisible: false,
                    // 预览的图片地址
                    previewImgUrl: '',
                });
                export default (state = defaultState, action: any) => {
                    switch (action.type) {
                        case actionTypes.SET_PREVIEW_TOOGLE:
                            return state.set('isPreviewVisible', action.data);
                        case actionTypes.SET_PREVIEW_URL:
                            return state.set('previewImgUrl', action.data);
                        default:
                            break;
                    }
                    return state;
                };

            |- index.ts
            import { createStore, applyMiddleware, compose } from 'redux';
            import createSagaMiddleware from 'redux-saga';
            import reducer from './reducers';
            // 引入合并后的saga
            import rootSaga from './sagas';
            const sagaMiddleware = createSagaMiddleware();
            const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
                ? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
                : compose;
            const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));
            const store = createStore(reducer, enhancer);
            // 执行saga
            sagaMiddleware.run(rootSaga);
            export default store;

            |- reducers.ts
            import { combineReducers } from 'redux-immutable';
            import { reducers as commonReducer } from './modules/common/index';
            import { reducers as businessReducer } from './modules/business/index';
            const reducer = combineReducers({
                common: commonReducer
            });
            export default reducer;

            |- sagas.ts
            import { all, fork } from 'redux-saga/effects';
            // 异步逻辑模块文件引入
            import { businessSagas } from './modules/business';
            // 合并saga，单一进入点，一次启动所有Saga
            export default function* rootSaga() {
                yield all([fork(businessSagas.default)]);
            }
    |- view
    App.tsx
    import React, { useEffect } from 'react';
    import store from '@/store/index';
    import { tooglePreview, setPreviewUrl } from '@/store/modules/common/actionCreators';
    import Preview from '@components/Preview/index';
    import { Button } from 'antd'
    function App() {
        function handlePreview(file) {
            store.dispatch(tooglePreview(true));
            store.dispatch(setPreviewUrl(file.url));
        }
        return (
            <div>
                <Button onClick={handlePreview}>预览</Button>
                <Preview />
            </div>
        );
    }
    export default App;