2015-01-04 10 views
5

私たちが懸念を分ける方法を知っているとき、反応成分はすばらしいです。 しかし、私はこの事例を抽象化するのが本当に難しいと思っています。React?のコンポーネントごとに列を持つHTMLテーブルをモデル化するには?

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

私は例えば、要求ごとに1列を返すAPIを持っている:[AA、AB、のAc] はので、通常、私はA、B、Cが反応コンポーネント になりたいと、それは親のためにそれをレンダリングしますコンポーネント

しかし、この場合、列ごとではなく、コンポーネントごとにhtml構造のフレーバtrがあるため、簡単にはできません。

誰もがこれについて考えていますか?

+0

CSSグリッドレイアウトの1つ、たとえば、twitterブートストラップを使用します。列の高さが異なっていても同じようにする必要がある場合は、いくつかの問題が発生する可能性があります。 – daniula

+0

__row__ごとに1つの反応コンポーネントがあるように、理想的には物を分ける必要があります。各列ごとに異なるajax応答がある場合は、すべての要求を実行し、個々の表の行コンポーネントに渡すときに水平表構造にマップします。データをまったく更新する必要がある場合、 'state'に設定すると、同じマッピング関数が再び実行されます。 –

+0

クイックハック:http://jsfiddle.net/0tk44f75/1 明らかに、余分なコンポーネントに分割することができます。しかし、それをやっている最も美しい方法ではありません – knowbody

答えて

0

反復処理を繰り返してプロパティを繰り返します。 「RowRenderer」コンポーネントを使用して、すべてのプロパティをループします。これは、事前に知っているので、.a.b.cです。プロパティごとに、ABC、および反復のプロパティ名のようなオブジェクトを受け取り、セルをレンダリングする "CellRenderer"を使用します。

関連する問題