javascript - 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 将其注入(inject) 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')
);