React implementiert Endlosschleifen-Scrollinformationen

Klasse Roll erweitert React.Component{
  
  Zustand = {
    Liste: [
      { Titel: 'Gedanken einer stillen Nacht' },
      { Titel: 'Tang-Li Bai' },
      { title: 'Helles Mondlicht vor dem Fenster' },
      { title: 'Ich glaube, es ist Frost auf dem Boden' },
      { title: 'Schau hinauf zum hellen Mond' },
      { title: 'Ich schaue nach unten und denke an meine Heimatstadt' },
    ]
  }

  KomponenteWillMount = () => {
    dies.beginnen()
  }

  rollen = () => {
    lass arr = diese.Zustandsliste;
    arr.push(diese.Zustandsliste[0])
    arr.spleiß(0,1)
    dies.setState({
      Liste: arr,
    })
    Konsole.log(diese.Statusliste);
  }

  beginne = () => {
    dieser.timer = setzeInterval(() => {
      dies.rollen()
    }, 1000);
  }

  Stopp = () => {
    Intervall löschen(dieser.Timer)
  }

  rendern () {
    zurückkehren (
      <div onMouseEnter={this.stop} onMouseLeave={this.begin} className='box'>
        {this.state.list.map(item => {
          zurückkehren (
            <p>
              {item.title}
            </p>
          )
        })}
      </div>
    )
  }
}

Klasse Roll erweitert React.Component{

  Zustand = {
    Liste: [
      { title: 'Dies ist Nachricht 1' },
      { title: 'Dies ist Nachricht 2' },
      { title: 'Dies ist Nachricht 3' },
      { title: 'Dies ist Nachricht 4' },
      { title: 'Dies ist Nachricht 5' },
      { title: 'Dies ist Nachricht 6' },
      { title: 'Dies ist Nachricht 7' },
      { title: 'Dies ist Nachricht 8' },
      { title: 'Dies ist Nachricht 9' },
    ],
    Anzahl: 0,
  }

  //Starte den Timer, wenn die Seite gemountet ist componentDidMount = () => {
    dies.beginnen()
  }

  // Zeitgeber beginnt = () => {
    dieser.timer = setzeInterval(() => {
      dies.Roll()
    }, 10);
  }

  // Schalte den Timer aus stop = () => {
    Intervall löschen(dieser.Timer)
  }

  // Jedes Mal, wenn der Versatz 0,5 Pixel beträgt, verwende den Status, um die Anzahl der Versätze zu speichern. Roll = () => {
    dies.setState({
      Anzahl: dieser.Zustand.Anzahl+1
    })
    dies.refs.roll.style.top = -0,5*dieser.Zustand.Anzahl+'px';
    // Wenn der Offset 40px erreicht, schneide die ersten Daten im Array bis zum Ende des Arrays ab und subtrahiere dann die Anzahl der Offsets, die der Höhe einer Zeile entspricht, if(-0.5*this.state.count <= -40){
      lass arr = diese.Zustandsliste;
      arr.push(diese.Zustandsliste[0])
      arr.splice(0,1);
      dies.setState({
        Liste: arr,
        Anzahl: this.state.count – 50,
      })
      this.refs.roll.style.top = (this.state.count*(-0.5)) + 'px'
    }
    
  }

  machen(){
    zurückkehren (
      <div className="box" onMouseEnter={diese.stop} onMouseLeave={diese.begin}>
        <div Klassenname = "Inhalt" ref = "Rolle">
          {this.state.list.map((item)=>{
            zurückkehren (
              <p Klassenname='Zeile'>
                <a href="#" rel="externes nofollow" >
                  {item.title}
                </a>
              </p>
            )
          })}
        </div>
      </div>
    )
  }
}

.Kasten{
  Breite: 300px;
  Höhe: 160px;
  Rand: 1px tief schwarz;
  Rand: 200px 300px;
  Position: relativ;
  Überlauf: versteckt;
}

.Inhalt{
  Position: absolut;
  oben: 0px;
}

.Reihe{
  Höhe: 20px;
  Rand: 5px automatisch;
}

KomponenteDidMount = () => {
        Konsole.log(diese.refs.test);
    }

    rendern () {
        zurückkehren (
            <div ref='Test'>
                123
            </div>
        )
    }

KomponenteDidMount = () => {
    Konsole.log(ReactDom.findDOMNode(dies));
  }

  rendern () {
    zurückkehren (
      <div Klassenname='Test'>
        123
      </div>
    )
  }