review

example/src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
 import './App.css';
+import 'react-photo-view/dist/index.css';
 
 const Container = styled.div`
   font-size: 32px;

src/PhotoSlider.tsx

@@ -4,6 +4,7 @@ import PhotoView from './PhotoView';
 import SlideWrap from './components/SlideWrap';
 import CloseSVG from './components/CloseSVG';
 import isMobile from './utils/isMobile';
+import './PhotoSlider.less';
 import { dataType, IPhotoProviderBase } from './types';
 import { defaultOpacity, horizontalOffset, maxMoveOffset } from './variables';
 
@@ -273,7 +274,7 @@ export default class PhotoSlider extends React.Component<
         <SlideWrap className={className}>
           <div
             className={classNames(
-              'PhotoView_PhotoSlide__Backdrop',
+              'PhotoView-PhotoSlider__Backdrop',
               maskClassName,
             )}
             style={{ background: `rgba(0, 0, 0, ${backdropOpacity})` }}

src/components/SlideWrap.tsx

@@ -3,42 +3,54 @@ import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import './SlideWrap.less';
 
-const SlideWrap: React.FC<{ className?: string }> = ({
-  className,
-  children,
-}) => {
-  const [dialogNode] = React.useState(() => {
+export default class SlideWrap extends React.Component<{
+  className?: string;
+  children: any;
+}> {
+  static displayName = 'SlideWrap';
+
+  private dialogNode;
+  private originalOverflow;
+
+  constructor(props) {
+    super(props);
+
     // 创建容器
-    const dialogNode = document.createElement('section');
-    document.body.appendChild(dialogNode);
-    return dialogNode;
-  });
-  const originalOverflowCallback = React.useRef('');
-
-  React.useEffect(
-    () => {
-      const { style } = document.body;
-      originalOverflowCallback.current = style.overflow;
-      style.overflow = 'hidden';
-
-      return () => {
-        const { style } = document.body;
-        style.overflow = originalOverflowCallback.current;
-        // 清除容器
-        document.body.removeChild(dialogNode);
-      };
-    },
-    [] as readonly [],
-  );
-
-  return createPortal(
-    <div className={classNames('PhotoView__SlideWrap', className)}>
-      {children}
-    </div>,
-    dialogNode,
-  );
-};
-
-SlideWrap.displayName = 'SlideWrap';
-
-export default SlideWrap;
+    this.dialogNode = document.createElement('section');
+    document.body.appendChild(this.dialogNode);
+  }
+
+  componentDidMount() {
+    this.preventScroll();
+  }
+
+  componentWillUnmount() {
+    this.allowScroll();
+    // 清除容器
+    document.body.removeChild(this.dialogNode);
+    this.dialogNode = undefined;
+  }
+
+  preventScroll = () => {
+    const { style } = document.body;
+    this.originalOverflow = style.overflow;
+    style.overflow = 'hidden';
+  };
+
+  allowScroll = () => {
+    const { style } = document.body;
+    style.overflow = this.originalOverflow;
+    this.originalOverflow = undefined;
+  };
+
+  render() {
+    const { className, children } = this.props;
+
+    return createPortal(
+      <div className={classNames('PhotoView__SlideWrap', className)}>
+        {children}
+      </div>,
+      this.dialogNode,
+    );
+  }
+}