Question

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

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

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组件编写，因此我可以重复使用它，只需更改作为props传入的两组数据。这一切都很好并且有效，但我正在努力弄清楚如何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>
  );
}
...

我希望我在这里有所了解，因为它有点模糊。我基本上想要使用列rowData名称从id获取值。 EG：<td>{row.name}</td><td>{row.value}</td>没有对项目进行硬编码。

Answer 1

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

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

Answer 2

所以你只想获得与列id匹配的行的属性？您可以使用方括号（如row[column.id]

）访问动态名称的媒体资源

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

Javascript - 从另一个数组

2 个答案: