newICSS/src/components/EmergencyProcedure/index.jsx

import styles from './index.less';
import right from './img/right.png';
import EmergencyModal from './EmergencyModal';
import $ from 'jquery';
import ReactDom from "react-dom";

class EmergencyProcedure extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      show:false,
      data:{}
    }
  }
  
  slideToggle(type){
    if(type){
      $("#emergencyName").css({"display":"block","paddingLeft":"50px","paddingRight":"30px"})
      $("#emergencyPic").css("display","block")
      $("#emergencys").css("display","none")
      $("#emergency").css("display","block")
      $("#emergencyWrap").css({"width":"auto","height":"44px"})
    }else{
      $("#emergencyName").css({"display":"none","padding":"0"})
      $("#emergencyPic").css("display","none")
      $("#emergencyWrap").css({"width":"44px","height":"44px"})
      $("#emergencys").css("display","block")
      $("#emergency").css("display","none")
    }
  }
  handleShow(type){
    this.setState({
      show:type
    })
  }
  render(){
    const {data,setDataIdx,idx} = this.props;
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(<div className={styles.emergencyProdureWrap}>
      <div id="emergencyWrap" className={styles.emergencyWrap}>
        <span id="emergency" className={`${styles.emergency}`} onClick={()=>this.slideToggle(0)}>急</span>
        <span id="emergencys" onClick={()=>this.slideToggle(1)} className={styles.emergency}>急</span>
        <div id="emergencyName" className={styles.emergencyName} onClick={()=>this.handleShow(true)}>{data.emergencyname}</div>
        <i onClick={()=>this.slideToggle(0)} id="emergencyPic"><img src={right} alt=""/></i>
      </div>
      {
        <EmergencyModal idx={idx} handleShow={()=>this.handleShow()} setDataIdx={setDataIdx} show={this.state.show} data={data}></EmergencyModal>
      }
    </div>,domNode)
  }
}

export default EmergencyProcedure;