映射对象React->键问题

Question

将车把/木偶项目转换为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？

感谢阅读！

编辑：

我目前正在得到什么：

我想要的结果：

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

Answer 1

您可以使用Object.keys而不是var element = p.AddItem("Compile", "XamlCsPath.xaml.cs"); // this works for the xaml cs element[0].SetMetadataValue("DependentUpon", "XamlFile.xaml"); 来映射键：

Object.values

Answer 2

也许您正在寻找Object.entries？

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