使用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 - 從另一個陣列

回答

相關問題