newICSS/src/components/Preview/index.jsx

import React, { Component } from "react";
import {getAllDataList,getAllDataStringList} from '@utils/tools';
import {dragBox} from '@utils/drag';
import ReactDom from 'react-dom';
import PreviewBody from '../PreviewBody';
import store from '@store';
import style from "./index.less";
import close from '../../common/images/icon_close.png';

class Preview extends Component {
  constructor(props) {
    super(props)
  }
  componentDidMount(){
    dragBox('previewWrapper','previewStatic','add')
  }
  render() {
    const { onClose, visible,preInfo } = this.props;
    let baseList = store.getState();
    const dataJson = getAllDataList(baseList);
    const dataStr = getAllDataStringList(baseList);
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(<React.Fragment>
      <div className={style['container']}>
        <div className={style['shade']} onClick={onClose}></div>
        <div className={style['modal']} id="previewWrapper">
          <div id="previewStatic" className={`${style['close']} drag-title`}>预览</div>
          <img className={style.closeImg} src={close} onClick={onClose} />
          <PreviewBody
              preInfo={preInfo}
              dataJson={dataJson}
              dataStr={dataStr}
              show={false}
              come={'preview'}
          ></PreviewBody>
        </div>
      </div>
      </React.Fragment>,domNode)
  }
}

export default Preview;