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

组件编写，这样我就可以重用它，只需更改作为道具传入的两组数据。这一切都很好，也很有效，但是我正在努力弄清楚如何将行和列映射为动态的

i、 e:

。。。
{this.props.rowData.map（行=>{
返回(
{this.props.columnData.map（column=>{
返回(
{row.（\u列\u ID\u获取\u值）}
);
}
);
}
...

---

我希望我在这里讲得有点道理，因为它有点模糊。我基本上希望使用列

id

name从

rowData

获取值。例如：

{row.name}{row.value}

而无需对项进行硬编码。

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

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

{this.props.rowData.map（行=>{
返回(
{this.props.columnData.map（column=>{
返回(
{行[column.id]}
);
}
);
}

所以您只想获取与列id匹配的行的属性？您可以使用方括号访问具有动态名称的属性，如

行[column.id]

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

{this.props.rowData.map（行=>{
返回(
{this.props.columnData.map（column=>{
返回(
{行[column.id]}
);
}
);
}

使用括号表示法，如

{row[column.id]}

。非常有效。谢谢！我知道这会很简单。如果你想把这个作为答案，我可以接受

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