添加打开和关闭组件代码

Author: 李钿

example/App.jsx

@@ -14,23 +14,46 @@ class App extends Component {
       require('./assets/0.jpg'),
       require('./assets/3.jpg'),
       require('./assets/4.jpg'),
-    ]
+    ],
+    index: 0,
+    isOpen: false
   };
 
+  onClose = () =>{
+    this.setState({
+      isOpen: false
+    })
+  }
+
+  openViewer (index){
+    this.setState({
+      index,
+      isOpen: true
+    })
+  }
+
   render() {
+    const {
+      imags,
+      index,
+      isOpen
+    } = this.state;
+
     return (
       <div className="app">
         <div className="img-list">
           {
-            this.state.imags.map(item => {
+            this.state.imags.map((item, index) => {
               console.info("111",item);
               return <div className="img" key={item}>
-                <img src={item} alt="" width="100%" height="auto" className=""/> 
+                <img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/> 
               </div>
             })
           }
         </div>
-        <WxImageViewer urls={this.state.imags} index={2}/>
+        {
+          isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : ""
+        }
       </div>
     )
   }

src/components/ListContainer.jsx

@@ -4,87 +4,6 @@ import {Motion, spring} from 'react-motion';
 
 import ImageContainer from './ImageContainer'
 
-class HandleWrapContainer extends PureComponent {
-
-  state = {
-    left: 0,
-    isNeedSpring: false
-  }
-
-  handleTouchStart = (event) =>{
-    console.info("handleTouchStart")
-    let targetEvent = event.changedTouches[0];
-    this.startX = targetEvent.clientX;
-    this.startY = targetEvent.clientY;
-
-    this.startLeft = this.state.left;
-    this.setState({
-      isNeedSpring: false
-    })
-    event.preventDefault();
-  }
-
-  handleTouchMove = (event) =>{
-    // console.info("handleTouchMove")
-    let targetEvent = event.changedTouches[0],
-      diffX = targetEvent.clientX - this.startX,
-      left = this.startLeft + diffX;
-
-    this.setState({left})
-    event.preventDefault();
-  }
-
-  handleTouchEnd = (event) =>{
-    console.info("handleTouchEnd")
-
-    let left = Math.round(this.state.left/this.props.diff)*this.props.diff
-    if(left > 0){ left = 0}
-    if(left < -this.props.maxW){ left = -this.props.maxW}
-    this.setState({
-      left,
-      isNeedSpring: true
-    })
-    event.preventDefault();
-  }
-
-  render(){
-    const {
-      children,
-      style,
-    } = this.props
-
-    const {
-      left,
-      isNeedSpring
-    } = this.state
-
-    return (
-      <Motion style={{x: isNeedSpring ? spring(left) : left}}>
-        {
-          ({x}) => {
-            let defaultStyle = {
-              WebkitTransform: `translate3d(${x}px, 0, 0)`,
-              transform: `translate3d(${x}px, 0, 0)`,
-            }
-
-            return (
-              <div 
-                className="viewer-list-container"
-                onTouchStart={this.handleTouchStart}
-                onTouchMove={this.handleTouchMove}
-                onTouchEnd={this.handleTouchEnd}
-                style={defaultStyle}
-                >
-                { children }
-              </div>
-            )
-          }
-        }
-      </Motion>
-    )
-  }
-}
-
 class ListContainer extends PureComponent {
   static propTypes = {
     gap: PropTypes.number,

src/components/WrapViewer.jsx

@@ -19,16 +19,13 @@ class WrapViewer extends Component {
   static defaultProps = {
     zIndex: 100,
   }
-
-  componentWillMount() {
-    
-  }
 
   render() {
     const {
       zIndex,
       urls,
-      index
+      index,
+      onClose
     } = this.props
 
     defaultStyle.zIndex = zIndex;

src/components/WxImageViewer.jsx

@@ -28,7 +28,11 @@ class WxImageViewer extends Component {
     zIndex: PropTypes.number,
     urls: PropTypes.array.isRequired, // 需要预览的图片http链接列表
     index: PropTypes.number, // 当前显示图片的http链接
+    onClose: PropTypes.func.isRequired
   }
+  static childContextTypes = {
+    onClose: PropTypes.func
+  };
 
   static defaultProps = {
     zIndex: 100,
@@ -52,6 +56,10 @@ class WxImageViewer extends Component {
     this.removePortal();
   }
 
+  getChildContext() {
+    return {onClose: this.props.onClose};
+  }
+
   removePortal(){
     ReactDOM.unmountComponentAtNode(this.node);