使用Javascript - 从另一个阵列

-1

这可能是一个非常愚蠢的问题或不可能的问题找对象的名字..使用Javascript - 从另一个阵列

我有一个使用对象的两个数组，像这样的表：

const columnData = [ 
    { id: 'name', label: 'Name' }, 
    { id: 'value', label: 'Value' } 
]; 

const rowData = [ 
    { name: 'Name 01', value: 100 }, 
    { name: 'Name 02', value: 150 }, 
    { name: 'Name 03', value: 200 }, 
];

我我将它作为一个单独的react组件编写，以便我可以重用它并只更改作为道具传入的两组数据。这一切都很好，但我努力想弄清楚如何将行和列变为动态的。

即：

... 
{this.props.rowData.map(row => { 
    return (
    <tr> 
    {this.props.columnData.map(column => { 
     return (
     <td>{row.(THE_COLUMN_ID_TO_GET_THE_VALUE)}</td> 
    ); 
    } 
    </tr> 
); 
} 
...

我希望我做一些感觉这里，因为它是一个有点模糊。我基本上要使用列id名来自rowData获得的价值。 EG：<td>{row.name}</td><td>{row.value}</td>没有硬编码的项目。

来源

2017-08-25 Timmo

使用括号标记像'{行[column.id]}'。 – Sirko

完美的作品谢谢你！我知道这会很简单。如果你想把它作为答案，我可以接受它 – Timmo

您可以使用对象上的[]语法来获取基于计算属性的值。

{this.props.rowData.map(row => { 
return (
    <tr> 
    {this.props.columnData.map(column => { 
     return (
     <td>{row[column.id]}</td> 
     ); 
    } 
    </tr> 
); 
}

来源

2017-08-25 15:09:38

所以，你只是想获得匹配列ID的行的属性？您可以访问使用方括号动态名称的属性一样row[column.id]

{this.props.rowData.map(row => { 
    return (
    <tr> 
    {this.props.columnData.map(column => { 
     return (
     <td>{row[column.id]}</td> 
    ); 
    } 
    </tr> 
); 
}

来源

2017-08-25 15:09:41 Gaafar

使用Javascript - 从另一个阵列

回答

相关问题