Reactive Hinzufügen von CSS-Klasse ohne rerender

Question

In meinem Projekt habe ich Tabelle, jede Zeile hat seine eigene Klasse hängt vom Zustand ab. Ich habe auch Spalten geklebt, so wenn ich horizontal Scroll dann einige Spalten sind behoben.

Mein Problem ist, dass, wenn einiger Zustand verändert (zB. none-rejected) Ich brauche diese Zeile als rejected Klassennamen markieren und Hintergrundfarbe ändern.

Die Verwendung von setState ist problematisch, weil ganze Zeile neu gerendert wird, so dass meine klebrigen Spalten weg sind (ich mache Berechnungen auf jedem scroll Ereignis).

Die Frage ist: gibt es eine andere Lösung zu reagieren className ohne meine Zeile neu zu ersetzen? (neben jQuery)

Answer 1

Ja, ich habe eine Lösung gefunden. Meine Zelle in einer Zeile hat eine eigene Komponente. Wie Sie wissen, muss jedes Element, das aus Array erzeugt, key prop. Haben.

return (
    <tr> 
    {cells.map(cell => (<td key={_.uniqueId()}>{cell.val}</td>)) 
    </tr> 
) 

I verwendet _.uniqueId() Wert vorbei lodash des sein - das ist mein Problem verursacht wurde. Die Lösung bestand darin, diese eindeutige ID durch eine eindeutige Zeichenfolge zu ersetzen, in meinem Fall durch die Kombination zweier IDs und des Spaltennamens.

So endgültige Lösung sieht so aus:

return (
    <tr> 
    {cells.map(cell => { 
     const keyId = `${row.id}${cell.id}${cell.name}` 
     return (<td key={keyId}>{cell.val}</td>}) 
    }} 
    </tr> 
) 

Hier Erklärung dafür ist, warum es zu zerstören und rerendering wieder: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 2

Ändern Sie den Status in Ihrer Row-Komponente, damit die Klasse aktualisiert wird. Verwenden Sie anschließend PureComponent (https://github.com/facebook/react/pull/7195) für Ihre untergeordneten Komponenten, so dass sie nicht erneut gerendert werden, sofern ihre eigenen Requisiten nicht geändert wurden. Löst das dein Problem?