Javascript - 从另一个数组中获取对象的名称[重复]答案

【问题标题】：Javascript - Get an object's name from another array [duplicate]Javascript - 从另一个数组中获取对象的名称[重复]
【发布时间】：2017-08-25 15:04:01
【问题描述】：

这可能是一个非常愚蠢或不可能的问题..

我有一个表，它使用两个对象数组，如下所示：

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 组件，这样我就可以重用它，只需更改作为道具传入的两组数据。这一切都很好并且工作正常，但是我正在努力弄清楚如何map 行和列是动态的。

即：

...
{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> 没有对项目进行硬编码。

【问题讨论】：

使用括号表示法，如<td>{row[column.id]}</td>。
完美运行，谢谢！我知道这会很简单。如果您想将此作为答案，我可以接受

标签： javascript arrays reactjs object material-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：