映射对象 React -> 键问题

Question

将把手/marionette 项目转换为 React。

需要映射两个对象的数组：

[{COAL: 462, GAS: 400, MIXED: 230, OIL: 288, TOTAL: 1380}, {COAL: 0, GAS: 0, MIXED: 0, OIL: 0, TOTAL: 0}]

这就是我目前的做法：

<tr className="Total">
    <td className="tableBoldBorder  hide">Total</td>
    {props.totals.map(totals =>
        R.values(totals).map(totals => (
            <td className="{{@key}}Column">{formatNumberValues(totals)}</td>
        ))
        )}
</tr>

一切都很好。不过请注意@key，它仍然是一个车把功能。本质上，我希望类名与正在呈现的列一致，即。 COALColumn -> 462，GASColumn -> 400 等

问题是，我在映射过程中丢失了密钥。 R.values(totals).map 给出以下输出：

[[462, 400, 230, 288, 1380], [0, 0, 0, 0, 0]]

是否可以访问密钥以允许动态映射类名？

感谢阅读！

编辑：

我目前得到的：

我想要的结果：

className "TOTALColumn" 将在该特定列上呈现边框。正如我在附图中所做的那样，对此进行硬编码不是一种选择。

Answer 1

也许 Object.entries 是您要找的东西？

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

Answer 2

您可以使用 Object.keys 而不是 Object.values 来映射键：

<tr className="Total">
  <td className="tableBoldBorder  hide">Total</td>
  {props.totals.map(totals =>
    Object.keys(totals).map(key => (
      <td className={`${key}Column`}>{formatNumberValues(totals[key])}</td>
    ))
  )}
</tr>

映射对象 React -> 键问题

Mapping Object React -> Issue with Keys

javascript

reactjs

handlebars.js

marionette

ramda.js