编辑了这个答案，找到了你想要的解决方案。看看这个code。

• 注意：**如果您的content中所有行字段的顺序都是匹配的，而只是头的顺序有问题-那么这个code就足够了。

因此，为了使它作为一个可重用表工作，即使content顺序混乱-我所做的只是在显示它之前对content进行排序：

const allSortedContent = []; 

  for (const row in props.content) {
    const sortedRowValues = []; 
    // Pushing the values of this row to the `sortedValues` according the order of the headers.
    props.headers.forEach((header) => {
      const value = props.content[row][header];
      sortedRowValues.push(<td>{value}</td>);
    });
    allSortedContent.push(<tr>{sortedRowValues}</tr>);
  }

在这里，我将介绍content数组，其中包含作为对象的行。对于每一行-我排序它的领域是根据标题的顺序。在每次迭代中，我使用sortedRowValues数组，它将包含此行的<td>元素（与标题的顺序匹配）。
在完成每一行之后，我将Map的行-（* sortedRowValues *）推送到包含所有排序行的allSortedContent数组。
最后，在表体中，我简单地返回allSortedContent。

return (
    <div>
      <table>
        <thead>
          <tr>
            {props.headers.map((item) => (
              <td>{item}</td>
            ))}
          </tr>
        </thead>
        <tbody>{allSortedContent}</tbody>
      </table>
    </div>
  );

你通过props发送的数据结构应该是这样的，但是如果它乱了序也是完全可以的：

const headers = ['age', 'lastName', 'name'];

const content = [
    { name: 'Jule', lastName: 'Abc', age: '24' },
    { lastName: 'Park', age: '32', name: 'Josh' },
  ];

我想它会解决你的问题，因为你有一个数组，你想把键写在头部，把项写在主体。我是这样假设的。

<table>
  <thead>
    {Object.keys(contents).map((key) => {
        <tr>{key}</tr>
    })}
  </thead>
  <tbody>
    {contents.map(item => (
      <tr>{item}</tr>
    ))}
  </tbody>
</table>