Mutiert Requisiten Reagieren

Ich habe einen Reagieren Komponente empfängt ein array oder Objekte über props. Etwas, was ich gerne tun würde, ist eine Veranstaltung wieder, um die Requisiten. Es scheint jedoch, dass Reagieren, re-Rendern tritt nur auf, wenn state änderungen.

Nun habe ich die Bestellung erfolgt auf die parent-Objekt, und übergeben Sie die Methode zur Handhabung der Bestellung durch als Stütze, aber idealerweise möchte ich die Komponente, die verantwortlich für die Darstellung dieser Objekte auch mit der Bestellung.

Einspannen props in state schlecht scheint, aber was ist das beste, was hier zu tun ist?

  • Wie ich sehe, haben Sie zwei Optionen. Entweder "chuck" in Staat und dann manipulieren den Staat. Die andere option ist, um einige flux-Architektur für das Projekt, dann könnten Sie eine Aktion auslösen, wenn ein re-arrangieren Ereignis passiert und die Komponente, die Pässe, die Requisiten machen könnten, neu zu ordnen, wenn er die Veranstaltung und übergeben Sie die neu arrangierten Requisiten.
  • Warum nicht einfach die Eltern tun, die Sortierung? Ändern der Eigenschaften einer Kind-Komponente wird dazu führen, dass re-render: jsfiddle.net/wiredprairie/re7q4c57
InformationsquelleAutor Neil Middleton | 2015-03-31
  1. 9

    Requisiten sind unveränderlich, aber in deinem Fall scheint es, dass Ihre Daten nicht geändert, nur die Sortierreihenfolge ändert, so können Sie:

    • halten Sie Ihre Daten-und Sortierfunktionen als Requisiten
    • speichern Sie Ihre Sortierreihenfolge im Staat
    • vielleicht mit getInitialState zurück die Standard-Sortierreihenfolge
    • wenn die Sortierreihenfolge geändert wird, Zustand festgelegt ist, so neu Rendern passiert
    InformationsquelleAutor al8anp
  2. 1

    So wie ich das verstehe Reagieren muss um den Status zu ändern, um die render-trigger. Wenn Sie möchten, um die Art Logik, mit dir verbunden Komponente, die Sie erstellen, wird eine Kopie des Arrays.

    getInitialState: function () {
    return {
        items: this.props.items.slice(0)
    };
},

    Als umgesetzt hier.

    InformationsquelleAutor Raulucco
Schreibe einen Kommentar