2015-01-04 24 views
5

Składniki reaktywne są niesamowite, gdy wiemy, jak oddzielić problem. Uważam jednak, że ta sprawa jest naprawdę trudna do abstrakcji.Jak modelować tabelę HTML z kolumną na składnik w React?

 
    | A | B | C | 
    | A.a | B.a | C.a | 
    | A.b | B.b | C.b | 
    | A.c | B.c | C.c | 

mam API, które zwracają 1 w kolumnie na żądanie, na przykład: [Aa Ab Ac] więc normalnie będzie tak jak A, B, C jako React SKŁADNIK i uczynić go na jego rodzic składnik

Jednak w tym przypadku nie mogę tego łatwo zrobić ze względu na strukturę smaku html na składnik, a nie na kolumnę.

Czy ktoś ma jakiś pomysł na ten temat?

+0

Użyj jednego z układów siatki CSS, na przykład twitter bootstrap. Możesz mieć pewne problemy, jeśli kolumny będą miały różne wysokości i potrzebujesz ich jednakowo, ale jest to możliwe po kilku majsterkowaniu. – daniula

+0

Idealnie należy oddzielić rzeczy, aby mieć jeden składnik reagujący na __row__. Jeśli masz różne odpowiedzi ajax dla każdej kolumny, wykonaj wszystkie żądania, a następnie zamapuj je na strukturę tabeli poziomej, przechodząc do poszczególnych składników wiersza tabeli. Jeśli dane wymagają aktualizacji, jeśli ustawisz na "stan", ta sama funkcja mapowania powinna zostać uruchomiona ponownie. –

+0

szybki hack: http://jsfiddle.net/0tk44f75/1 oczywiście możesz podzielić go na dodatkowe komponenty. nie jest to jednak najpiękniejszy sposób na zrobienie tego – knowbody

Odpowiedz

0

Iteruj inaczej, powtarzaj właściwości! Użyj komponentu "WierszRenderer", który przechwytuje wszystkie właściwości, biorąc pod uwagę, że znasz je wcześniej. Dla każdej właściwości użyj "CellRenderer", który pobiera obiekt taki jak A, B, C oraz nazwę właściwości iteracji i renderuje komórkę.

Powiązane problemy