Reactjs 如何使用React中每个组件的列为HTML表建模？

当我们知道如何分离关注点时，React组件非常棒。 然而，我发现这个案例真的很难抽象

| A | B | C | | A.a | B.a | C.a | | A.b | B.b | C.b | | A.c | B.c | C.c | |A | B | C| |A.A | B.A | C.A| |A.b | b.b | C.b| |A.c | B.c | c.c| 我有一个API，每个请求返回1列，例如：[A.A，A.b，A.c] 所以通常我喜欢A，B，C作为反应组分 并将其渲染到其父组件

然而，在这种情况下，我不能轻松地做到这一点，因为html结构是每个组件，而不是每个列

---

有人对此有任何想法吗？

以不同的方式迭代，迭代属性！使用一个“RowRenderer”组件，该组件循环遍历所有属性

.a

，

.b

，

.c

，前提是您事先知道这些属性。对于每个属性，使用一个“CellRenderer”，它接受像

a

、

B

、

C

这样的对象和迭代的属性名，并渲染单元格。

使用CSS网格布局之一，例如twitter引导。如果列具有不同的高度，并且您同样需要它们，则可能会出现一些问题，但经过一些修补之后，这是可行的。理想情况下，您应该将这些内容分开，以便每行有一个react组件。如果对每一列有不同的ajax响应，则执行所有请求，然后在传递到各个表行组件时将其映射到水平表结构中。如果数据需要更新，如果您将其设置为

状态

，那么相同的映射函数应该再次运行。quick hack：显然，您可以将其划分为额外的组件。但这不是最漂亮的方式