import React, { Component } from 'react';
import ReactDOM from 'react-dom'

import './TaskResultLayer.css'

class ImageLayer extends Component {

  	render() {
      	let { showImage, imageSrc, onImageLayerClose } = this.props;

      	// 语法介绍 https://reactjs.org/docs/portals.html
      	// 将html渲染都指定的element下
	    return ReactDOM.createPortal(
	    	<div>
		    	{showImage ?
  		    	<div className="taskResultLayer" onClick={onImageLayerClose} style={{overflow: 'auto'}}>
  		    		<div className="passContent">
                	<img src={ imageSrc }  className="passImg" unselectable="on" alt=""/>
	  		      	</div>
	            </div>
		      	:
		      	<div></div>
		      	}
	      	</div>,
	      	document.getElementById('root'),
  		);
    }
}

export default ImageLayer;