从待干燥的对象中进行数据选择

Question

快速提问更多关于我应该如何处理下面的问题。我有来自后端的数据，在前端我使用 React 我有一个基本上是 table 的组件。两个 api 调用 return 不同的对象。我想重复使用一个组件，而不是创建两个单独的 table，如下所示。我将一个数据对象传递给一个table组件，只需要根据对象知道哪些键到select。

      <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>

两个单独的 api 请求示例：

  {
     first: {four: {three: "different"}},
     first_test: {week_day: 'Saturday'},
     name: "first test"
  }
  {
    another: {one: {two: "nice"}},
    test: {time: 10:00},
    name: "test"
  }

那么，在不创建多个组件的情况下解决这种干燥问题的最佳方法是什么？也许一些 json 模式？

如果有人放弃另一个相关问题，它可能会重复。

Answer 1

您可以使任何输入符合您的通用 table 组件，就像这样

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

并称其为

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

或

<GenericTable first={name} second={test.time} third={another.one.two} />

根据评论更新 1

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

并称其为

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

从待干燥的对象中进行数据选择

Make the data selection from object to be dry

javascript

components

dry

object

reactjs