ReactJs中的动态表组件

Question

在令人兴奋的ReactJs世界里，我是一个全新的人，我正努力从我的数据中构建下表组件。

我已经为它设置了api端点：

http://domain.com/api/sales/{period-unit}/{period}/{products}
eg. http://domain.com/api/sales/day/1/1,2,3

哪会返回以下json（第1天）：

[
  {
    "productId": 1,
    "productSalesCount": 4
  },
  {
    "productId": 2,
    "productSalesCount": 65
  },
  {
    "productId": 3,
    "productSalesCount": 56
  }
]

在jquery中，如果我像这样每天发出一个GET请求，我可以从所有日子里获取所有数据：

var count = 365 // days in a year
for (var i = 0; i < count; i++) {
    $.ajax('http://domain.com/api/sales/day/' + i + "/products/1,2,3"), {});
}

虽然我当然可以找到一些在.js中构建这个表并使用jquery和.append将它注入DOM的相当丑陋的方法，但我很想知道如何在ReactJs中构建这样的可重用表组件（理想情况下） JSX） - 但我的数据与表格布局的形式使它有点难。

这里的任何天才谁能想出如何以正确的方式构建一个这样的表（理想情况下是使用React和JSX？）？

Answer 1

我建议您使用map和reduce的组合将api调用的响应一起操作到一个对象数组中：

[
  { productId: 1, day1: 12, day2: 15, day3: 16, ... , day365: 12},
  { productId: 2, day1: 12, day2: 15, day3: 16, ... , day365: 12},
  { productId: 3, day1: 12, day2: 15, day3: 16, ... , day365: 12}
]

完成后，您可以轻松使用reactable

之类的内容

var Table = Reactable.Table;
React.renderComponent(
    <Table className="table" data={allSalesByProduct} />,
    document.getElementById('table')
);