对象表格视图

从对象数组和属性名称列表动态创建行的表格。

• 使用Object.keys()、Array.prototype.filter()、Array.prototype.includes()和Array.prototype.reduce()来生成一个filteredData数组，其中包含所有具有propertyNames中指定的键的对象。
• 渲染一个<table>元素，其列数等于propertyNames中的值数量。
• 使用Array.prototype.map()将propertyNames数组中的每个值渲染为一个<th>元素。
• 使用Array.prototype.map()将filteredData数组中的每个对象渲染为一个<tr>元素，其中包含对象中每个键的一个<td>。

[!NOTE]

此组件不适用于嵌套对象，并且如果propertyNames中的任何属性中存在嵌套对象，它将无法正常工作。

const MappedTable = ({ data, propertyNames }) => {
  let filteredData = data.map(v =>
    Object.keys(v)
      .filter(k => propertyNames.includes(k))
      .reduce((acc, key) => ((acc[key] = v[key]), acc), {})
  );
  return (
    <table>
      <thead>
        <tr>
          {propertyNames.map(val => (
            <th key={`h_${val}`}>{val}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {filteredData.map((val, i) => (
          <tr key={`i_${i}`}>
            {propertyNames.map(p => (
              <td key={`i_${i}_${p}`}>{val[p]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const people = [
  { name: 'John', surname: 'Smith', age: 42 },
  { name: 'Adam', surname: 'Smith', gender: 'male' }
];
const propertyNames = ['name', 'surname', 'age'];
ReactDOM.createRoot(document.getElementById('root')).render(
  <MappedTable data={people} propertyNames={propertyNames} />
);