Was wäre der beste Weg Datenhaken zu Tabellenzeilendaten hinzuzufügen?

Question

Ich möchte jeder Zeile in einer React-Virtualized-Tabelle eine zusätzliche Eigenschaft hinzufügen, damit die Automation die resultierenden Zeilendaten identifizieren und dann überprüfen kann es.

Mit Blick auf die Dokumentation und den Code sieht es so aus, als wäre es am einfachsten, defaultTableRender einfach zu kopieren und zu modifizieren, um den Daten-Hook hinzuzufügen, den ich möchte, aber ich zögere, dies zu tun, da ich nicht will Unterhaltskosten für die Verfolgung der Änderungen an der ursprünglichen Funktion und deren Weiterleitung.

Eine weitere Option ist mit den Eigenschaften in einem div Ergebnis defaultRowRenderer wickeln, die ich brauche, so etwas wie:

 rowRenderer={(props) => { 
     return (
      <div 
      key={props.key} 
      data-hook={data[props.index].id}> 
      {defaultTableRowRenderer(props)} 
      </div> 
     ) 
     }} 

Das funktioniert aber scheint furchtbar schwere Hand.

Dennoch wäre eine weitere Option sein, um das Element zu klonen und dann fügen Sie einfach die Eigenschaften, die ich will:

 rowRenderer={(props) => { 
     return React.cloneElement(
      defaultTableRowRenderer(props), 
      {'data-hook': data[props.index].id}) 
     }} 

Dies könnte das sauberste, obwohl ich vermute, dass ich meine SFC in eine Komponente drehen sollte und wiederum mein fetter Pfeil-Renderer in eine Klassenfunktion mit Status, so dass er nicht auf jedem Render neu erstellt wird.

Gibt es eine einfachere Möglichkeit, die ich vermisse?

Answer 1

Ich denke, Sie haben es ziemlich gut mit diesen 3. Meine Stimme wäre, den Standard-Renderer zu forktieren. Dies würde Ihnen die beste Leistung bieten (obwohl der Unterschied ziemlich trivial sein kann). Was Ihre Wartung betrifft, the row-renderer is pretty stable.