如何访问数据对象中的嵌套数组以分配为数据网格的属性值？

Question

我有一个数据网格，它采用行和列的数组值。必要的值来自具有 3 层嵌套的数据对象。这是它的样子：

export const duplicatesBySourceGridData = {

 'dataFamily':{
        'fuzzyDuplicates':{
            'columns':[
                  { key: 'id', name: 'ID' },
                  { key: 'title', name: 'Title' }
                ],
            'rows':[
                  { id: 0, title: 'Example' },
                  { id: 1, title: 'Demo' }
                ]    
        },
        'exactDuplicates':{
          'columns':[
                { key: 'id', name: 'ID' },
                { key: 'title', name: 'Title' }
              ],
          'rows':[
                { id: 0, title: 'Example' },
                { id: 1, title: 'Demo' }
              ]    
      }
    }
}

目前，我正在尝试如下访问它们（请注意，tooltip 是悬停在图形元素上的函数，indexValue returns 值 "dataFamily" 和 id returns fuzzyDuplicates 或 exactDuplicates)

tooltip={({ id, value, color, indexValue }) => (
                        <div>
                            <Grid
                                column={duplicatesBySourceGridData[indexValue][id][`columns`]}
                                rows={duplicatesBySourceGridData[indexValue][id][`rows`]}
                            />
                        </div>                        
                    )}

这不起作用，问题出在我如何分配道具或我如何设置数据对象。

干杯。

Answer 1

我不知道这是否能解决您的问题，但您不需要使用刻度线字符串插值语法来访问 duplicatesBySourceGridData 中的键以及存储在变量中的值，例如indexValue:

<Grid
  columns={duplicatesBySourceGridData[indexValue][id].columns}
  rows={duplicatesBySourceGridData[indexValue][id].rows}
/>

如何访问数据对象中的嵌套数组以分配为数据网格的属性值？

How can I access nested arrays in a data object to assign as prop values for a data-grid?

javascript

reactjs

react-data-grid