使用 React 映射 JavaScript 对象键
介绍
在使用 React 编写任何 Web 应用时，您很可能会发现自己需要映射 JavaScript 对象的键。如果您刚刚从服务器获取了远程数据，那么很有可能在某个时候，您需要映射这些数据以填充视图层。在本指南中，您将学习如何以多种方式映射 JavaScript 对象的键，以便您可以选择最适合您应用的解决方案。
让我们开始吧！
使用纯 JavaScript
假设您正在从远程 API 获取狗的列表，并且 JSON 有效负载如下所示：
{
breed: 'German Shepherd'
如您所见，此有效负载由一个对象数组组成。如果您想使用每个对象的键作为列标题在 React 视图中动态显示表格，该怎么办？此解决方案要求您映射对象的键。
ES6 JavaScript 为此提供了一个内置方法 — Object.keys。此方法接受一个对象并返回一个键数组。以下是使用此内置方法填充简单表的示例：
render() {
const firstDog = Array.isArray(this.dogs) && this.dogs.length ? this.dogs[0] : {};
const headers = Object.keys(firstDog);
return (
<table class="table">
<tr>
{ headers.map(header => <th>{header}</th>) }
</tr>
{ this.dogs.map(dog => {
return <tr>{ headers.map(header => <td>{dog[header]}</td>) }</tr>
}) }
</table>
);
}
上述 React 组件的渲染函数使用Object.keys映射第一个 dog 对象的可用键。然后使用这些键生成表的<th>和<td>元素。这是一个简单的例子，但它展示了内置Object.keys方法的强大功能和实用性。
使用 Lodash
除了内置方法之外，使用外部库（如 Lodash）来帮助您映射对象的键也很容易。Lodash 提供了_.keys方法来映射对象的键。使用此方法会稍微影响性能，但这种方法也更简洁。下面，您将看到相同的渲染函数被重构为使用_.keys。
render() {
const headers = _.keys(_.head(firstDog));
return (
<table class="table">
<tr> { _.map(headers, header => <th>{header}</th>) } </tr>
{ _.map(this.dogs, dog => {
return <tr>{ _.map(headers, header => <td>{dog[header]}</td>) }</tr>;
}) }
</table>
);
}
上面的代码使用 Lodash 的_.keys函数来映射我们数据中的第一个狗。然后使用这些键来动态填充表中的列和行。_.keys函数的性能略低于内置的Object.keys方法，但它的可读性要高得多——尤其是与其他 Lodash 方法一起使用时。
结论
在本指南中，您学习了如何以多种方式映射 JavaScript 对象的键。首先，您了解了如何使用纯 JavaScript 实现解决方案，这样您就可以避免在应用程序中添加任何不必要的依赖项。您学习了如何使用内置的Object.keys函数映射对象基元并以迭代方式显示其中的底层数据。此后，您学习了如何利用 Lodash 库的_.keys方法通过编写非常简洁但性能稍差的代码来映射对象键。
我希望本指南能帮助您了解如何迭代 JavaScript 对象的键以及如何利用这些解决方案使用 React 创建引人注目的视图。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~