React kapselt die globale Bullet-Box-Methode

/* eslint-deaktivieren reagieren/kein-Render-Rückgabewert */
importiere React, {Komponente} von 'react'
importiere { ist, fromJS } von 'unveränderlich'
ReactDOM von „react-dom“ importieren
importiere './alert.less'

const schließen = erfordern('../images/guanbi.png')
const Zeile = erforderlich('../images/line.png')

const Standardstatus = {
  Alarmstatus: falsch,
  alertTip: null,
  alertTitle: 'Details',
  schließenAlarm: () => {}
}

Klasse Toptips erweitert Komponente {
  Zustand = {
    …Standardstatus
  }

  //CSS-Animationskomponente wird auf die Zielkomponente FirstChild = props => { eingestellt
    const childrenArray = React.Children.toArray(props.children)
    returniere childrenArray[0] || null
  }

  // Popup-Fenster schließen confirm = () => {
    const das = dies
    console.log(das)
    dies.setState(
      {
        Alarmstatus: falsch
      },
      () => {
        dieser.Zustand.Alarm schließen()
      }
    )
  }

  öffnen = Daten => {
    const Optionen = Daten || {}
    Optionen.alertStatus = true
    dies.setState({
      ...Standardstatus,
      ...Optionen
    })
  }

  schließen = () => {
    const das = dies
    dieser.Zustand.Alarm schließen()
    dies.setState({
      …Standardstatus
    })
  }

  sollteComponentUpdate = (nextProps, nextState) => {
    zurückkehren (
      !ist(vonJS(this.props), vonJS(nextProps)) ||
      !ist(vonJS(dieser.Zustand), vonJS(nächsterZustand))
    )
  }

  rendern() {
    const { alertStatus, alertTip, alertTitle } = dieser.Status
    console.log(AlarmTip, AlarmTitel)
    zurückkehren (
        <div
          Klassenname = "alert-con"
          Stil = {Alarmstatus? {Anzeige: 'Block'}: {Anzeige: 'keine'}}
        >
          <div Klassenname = "Alarm-Kontext">
            <div className="alert-content-title">{alertTitel}</div>
            <img className="alert-content-line" src={line} alt="line" />
            <div className="alert-content-detail">{alertTip}</div>
            <Bild
              Rolle="Präsentation"
              beiKlick={() => {
                dies.bestätigen()
              }}
              Klassenname = "Alarm schließen"
              src={schließen}
              alt="Schließen"
            />
          </div>
        </div>
    )
  }
}

const div = Dokument.createElement('div')
const props = {}
Dokument.Body.AnhängenKind(div)

const Box = ReactDOM.render(React.createElement(Toptips, props), div)

Standardbox exportieren

.alert-con {
  Position: fest;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Höhe: 100%;
  Hintergrund: rgba(255, 255, 255, 0,3);
  Z-Index: 222;
}
.alert-context {
  // Hintergrundfarbe: #fff;
  // Rahmenradius: 16px;
  Position: relativ;
  // Höhe: 500px;
  Höhe: 90%;
  Breite: 750px;
  Rand: 40px auto 0;
  Hintergrund: URL (../images/alertBJ.png) No-Repeat-Center;
  Hintergrundgröße: 100 % 100 %;
  .alert-close{
    Breite: 30px;
    Höhe: 30px;
    Position: absolut;
    rechts: 30px;
    oben: 30px;
  }
  .alert-content-title{
    Breite: 100 %;
    Höhe: 80px;
    Zeilenhöhe: 80px;
    Farbe: #fff;
    Textausrichtung: zentriert;
    Schriftgröße: 36px;
    Schriftstärke: fett;
    // Hintergrund: URL (../images/line.png) no-repeat links unten;
  }
  .alert-content-line{
    Breite: 100 %;
    Höhe: 20px;
    Rand oben: -44px;
    Rand links: -6px;
  }
  .alert-detais-list{
    Breite: 102 %;
    Höhe: 100%;
    Überlauf-y: automatisch;
    Polsterung: 20px 60px;
    .alert-detais-list-C{
      P{
        &:n-tes-Kind(1){
          Schriftgröße: 14px;
          Zeilenhöhe: 20px;
          Farbe: #FFFFFF;
          Buchstabenabstand: 1,4px;
        }
        &:n-tes-Kind(2){
          Zeilenhöhe: 24px;
          Schriftgröße: 18px;
          Farbe: #FFFFFF;
        }
      }
    }
  }
  .alert-content-detail{
    // Höhe: 100 %;
    Höhe: berechnet (100 % – 100 Pixel);
    /* Überlauf-y: auto; */
    Überlauf: versteckt;
    Breite: 98 %;
    Rand oben: -26px;
  }
  .alert-details-pdf{
    Breite: 102 %;
    Höhe: 100%;
    Überlauf-y: automatisch;
    Polsterung: 20px 60px;
    .alert-details-button{
      Anzeige: Flex;
      Flex-Richtung: Reihe;
      Inhalt ausrichten: Flex-Ende;
      Rand unten: 10px;
      P{
        Farbe: #fff;
        Zeilenhöhe: 35px;
        Schriftgröße: 16px;
        Rand rechts: 20px;
      }
      A{
        Zeilenhöhe: 35px;
        Schriftgröße: 16px;
        Rand rechts: 20px;
      }
    }
  }
.cameraWrap{
  Breite: 100 %;
  Höhe: 102%;
  Box-Größe: Rahmenbox;
  Polsterung: 12px 4px 0 14px;
}
}

Toptips aus "./Toptips" importieren
Toptipps.open({
      alertTitle: 'Kommentardetails',
      AlarmTipp: that.htms(Wert),
      closeAlarm: Funktion () {
        console.log("Geschlossen...");
      }
    });
  htms = Wert => {
    zurück (<div className="alert-detais-list">
      <div className="alert-detais-list-C">
        <p>Kommentarinhalt:</p>
        <p>{val.fdTitle}</p>
      </div>
      <div className="alert-detais-list-C">
        <p>Kommentardetails:</p>
        <p>{val.fdTitle}</p>
      </div>
      <div className="alert-detais-list-C">
        <p>Maßnahmen und Ergebnisse:</p>
        <p>{val.fdContent}</p>
      </div>
      <div className="alert-detais-list-C">
        <p>Fortschrittsdetails:</p>
        <p></p>
      </div>
    </div>)
  }