2015-01-04 17 views
5

Các thành phần phản ứng thật tuyệt vời khi chúng ta biết cách tách mối quan tâm. Tuy nhiên, tôi thấy trường hợp này thực sự khó trừu tượng.Làm thế nào để mô hình hóa một bảng HTML với cột cho mỗi thành phần trong React?

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

Tôi có API trả lại 1 cột theo yêu cầu, ví dụ: [Aa, Ab, Ac] rất bình thường, tôi sẽ thích A, B, C là một Phản ứng Component và làm cho nó để nó mẹ thành phần

Tuy nhiên, trong trường hợp này, tôi không thể dễ dàng làm điều đó vì vị trí cấu trúc html tr trên mỗi thành phần, không phải trên mỗi cột.

Có ai có ý tưởng gì về điều này không?

+0

Sử dụng một trong các bố cục lưới CSS, ví dụ: trình khởi động twitter. Bạn có thể gặp một số vấn đề nếu các cột có chiều cao khác nhau và bạn cần chúng như nhau nhưng có thể thực hiện được sau khi một số tinkering. – daniula

+0

Lý tưởng nhất là bạn nên tách riêng mọi thứ ra để bạn có một thành phần phản ứng trên mỗi __row__. Nếu bạn có các đáp ứng ajax khác nhau cho mỗi cột, sau đó thực hiện tất cả các yêu cầu và sau đó ánh xạ nó thành một cấu trúc bảng ngang khi chuyển đến các thành phần của bảng riêng lẻ. Nếu dữ liệu cần cập nhật, nếu bạn đặt nó thành 'state' thì hàm ánh xạ giống nhau sẽ chạy lại. –

+0

hack nhanh: http://jsfiddle.net/0tk44f75/1 rõ ràng là bạn có thể chia thành các thành phần phụ. không phải là cách làm đẹp nhất – knowbody

Trả lời

0

Lặp lại một cách khác, lặp lại các thuộc tính! Sử dụng thành phần "RowRenderer" lặp lại qua tất cả các thuộc tính .a, .b, .c cho trước khi bạn biết trước. Mỗi thuộc tính, sử dụng một "CellRenderer" có một đối tượng như A, B, C và tên thuộc tính của phép lặp lại và hiển thị ô đó.

Các vấn đề liên quan