Javascript 从要干燥的对象中选择数据

快速提问更多关于我应该如何处理下面的干燥问题。我有来自后端的数据，在前端我使用react，我有一个基本上是表的组件。两个api调用返回不同的对象。我希望重用一个组件，而不是像下面那样创建两个单独的表。我将一个数据对象传递给一个表组件，只需要根据对象知道要选择哪些键

      <table>
          <tbody>
            <tr>
              <td>{name}</td>
              <td>{first_test.week_day}</td>
              <td>{first.four.three}</td>
            </tr>
          </tbody>
        </table>

       <table>
          <tbody>
            <tr>
              <td>{name}</td>
              <td>{test.time}</td>
              <td>{another.one.two}</td>
            </tr>
          </tbody>
        </table>

那么，在不创建多个组件的情况下，实现这一点的最佳方法是什么？也许是json模式

---

如果有人删除另一个相关的问题，则可能会重复此问题。

您可以像这样将任何输入与通用表组件匹配

function GenericTable({first, second, third}) {
return (
<table>
  <tbody>
    <tr>
      <td>{first}</td>
      <td>{second}</td>
      <td>{third}</td>
    </tr>
  </tbody>
</table>
)
}

函数GenericTable（{first，second，third}）{
返回(
{first}
{second}
{third}
)
}

就这样说吧

<GenericTable first={name} second={first_test.week_day} third={first.four.three} />

<GenericTable columns={[name, first_test.week_day, first.four.three]} />

或

---

根据评论更新1

function GenericTable({ columns }) {
  columnstb = columns.map((column, index) => (<td key={index}>{column}</td>);
return (
<table>
  <tbody>
    <tr>
      {columnstb}
    </tr>
  </tbody>
</table>
)
}

函数GenericTable（{columns}）{
columnstb=columns.map（（列，索引）=>（{column}）；
返回(
{columnstb}
)
}

就这样说吧

<GenericTable first={name} second={first_test.week_day} third={first.four.three} />

<GenericTable columns={[name, first_test.week_day, first.four.three]} />

您当前的实现有什么问题？只有当存在显著的可重复差异时，您才应该创建更多的组件。您是说名称、测试和其他都是单独的api请求吗？您不是在使用一些函数将它们组合成一行吗？@SILENT更新了这个问题，也许这让问题更清楚了，基本上我想要对于具有不同数据的几个api请求，重复使用同一个表组件，但如果我指定要选择的对象键，它将不会变干，因为该键可能不会在另一个api调用中。希望这更清楚：）好的，如果它不总是三个，我的意思是，如果某个API调用中有四个或不同的数字，该怎么办？@Zygimantas使用数组代替多个列