React-Methode zum Anzeigen von Daten auf Seiten

const listData = [{
    Schlüssel: „001“,
    idd:"001",
    Titel: „Webstorm stellt eine Verbindung zu GitHub für eine einfache Lagerverwaltung her“,
    Zeit:"2016-12-01",
    tag:" git ",
    Inhalt: „666666666666666!“
}] // Und so weiter und so fort für mehrere Daten. Klasse listBox erweitert Komponente {

    Konstruktor (Requisiten) {
        super(Requisiten);
        diese.pageNext=diese.pageNext.binden(diese);
        dies.setPage=diese.setPage.bind(diese);
        dieser.Zustand = {
            indexList:[], //Aktuell gerenderte Seitendaten totalData:listData,
            current: 1, //Aktuelle SeitenzahlpageSize:4, //Anzahl der pro Seite angezeigten ElementegoValue:0, //Anzahl der anzuzeigenden Elementeindex
            totalPage:0, //Gesamtzahl der Seiten};

    }

    KomponenteWillMount(){
        //Legen Sie die Gesamtzahl der Seiten fest this.setState({
            totalPage:Math.ceil( dieser.Zustand.totalData.length/diese.Zustand.Seitengröße),
        })
        diese.SeiteWeiter(dieser.Status.geheWert)

    }

    //Den Inhalt festlegen setPage(num){
        dies.setState({
            indexList:dieser.Zustand.Gesamtdaten.Slice(Anzahl,Anzahl+dieser.Zustand.Seitengröße)
        })
    }


    SeiteWeiter (Nummer) {
        this.setPage(num)
    }



    rendern() {

        zurückkehren (
            <div Klassenname="main">
                <div Klassenname="obere_Leiste">
                </div>
                <div Klassenname="Listen">
                    <ul Klassenname="index">
                        {this.state.indexList.map(Funktion (Forts.) {
                            zurück <Liste {...cont} />
                        })}
                    </ul>

                    <PageButton { ...dieser.Zustand } pageNext={diese.pageNext} />

                </div>
            </div>
        );
    }
}

Klassenliste erweitert Komponente {
    Konstruktor(Requisiten) {
        super(Requisiten);
    }

    rendern() {
        const { idd, Titel, Zeit, Tag, Inhalt } = this.props

        zurückkehren (
            <li id={idd}>
                <Link zu={`/list/listmore/${idd}`} >
                    <h3>{Titel}</h3>
                    <div Klassenname="Symbol">
                        <i className="fa fa-kalender"></i>
                        <span>Veröffentlicht am {time} </span>
                        <i className="fa fa-sitemap"></i>
                        <span>Kategorisiert unter {tag} </span>
                        <i Klassenname = "fa fa-edit"></i>
                        <span>Noch keine Kommentare</span>
                    </div>
                    <p>{Inhalt}</p>
                    <span className="mehr">mehr</span>
                </Link>
            </li>
        );
    }
}

Klasse pageButton erweitert Komponente {

    Konstruktor(Requisiten) {
        super(Requisiten);
        dies.setNext=dieses.setNext.bind(dieses);
        dies.setUp = dies.setUp.bind(dies);
        dieser.Zustand={
            Zahl: 0,
            Seitennummer:this.props.current
        }
    }

    //Nächste Seite setNext(){
        wenn(dieser.Zustand.Seitennummer < diese.Props.Gesamtseite){
            dies.setState({
                num:dieser.Zustand.num + diese.Eigenschaften.Seitengröße,
                Seitennummer:dieser.Status.Seitennummer + 1
            },Funktion () {
                console.log(dieser.Status)
                diese.props.pageNext(dieser.state.num)
            })
        }
    }

    //Vorherige Seite setUp(){
        wenn(dieser.Zustand.Seitennummer > 1){
            dies.setState({
                num:this.state.num - this.props.pageSize,
                Seitennummer:dieser.Zustand.Seitennummer - 1
            },Funktion () {
                console.log(dieser.Status)
                diese.props.pageNext(dieser.state.num)
            })
        }
    }

    rendern() {
        zurückkehren (
            <div Klassenname="Seite_ändern">
                <span onClick={ this.setUp } >Vorherige Seite</span>
                <span>{ this.state.pagenum } Seite / { this.props.totalPage } Seite </span>
                <span onClick={ this.setNext }>Nächste Seite</span>
            </div>
        );
    }
}