使用 React 引用嵌套 Javascript 数组的列值

Posted 2023-02-21

【中文标题】使用 React 引用嵌套 Javascript 数组的列值

【英文标题】：Refer to column value of nested Javascript array with React

【发布时间】：2017-05-24 22:27:24

【问题描述】：

我有一个 javascript 数组示例，我希望在表格中可视化。

这是数组：

    var dataTable = [
           First:    In: "5 MB", Out: "6 MB",
            Second:    In: "5 MB", Out: "1 MB",
            Other:  In: "0.2 MB", Out: "2 MB"
        
    ];

在 React 中使用fixed-data-table，我希望将这些数据放入一个表中，其中 First、Second 和 Other 是行，而 IN/OUT 是列。

假设我希望用“in”值填充一个字段，然后用“Out”值填充。我是否将嵌套值引用为 First[0].In 和 First[0].Out 以检索它并将其显示在特定单元格中？

【参考方案1】：

您的结构看起来像一个数组 (dataTable)，其中包含一个元素，该元素是一个对象，其键名为 First、Second 和 Other。

要访问First 的In 和Out 属性，您可以像这样引用它们：dataTable[0].First.In 或dataTable[0].First.Out。

对于Second，您将遵循相同的模式：dataTable[0].Second.In 等。

或者，如果您要重复访问其属性，为什么不将 dataTable[0] 的引用存储为变量？

var toShow = dataTable[0];
console.log(toShow.First.In);
console.log(toShow.Other.Out);

这应该会给你一个大致的想法。您正在索引一个数组，然后使用对象的键来访问您想要的数据。

在我看来，dataTable 如果要包含具有固定键的单个对象，则根本不需要是数组；也许您希望它是一个对象数组，以便您可以分别索引每个对象？这取决于您，因为任何一种方式都可以。