使用 Response 动态创建 table React JS

Question

我目前收到的回复是returns一个像这样的数组

 const response = [{
    time: 1,
    speed: 2,
    direction:3,
    image:'url'

    
  },{
    time: 1,
    speed: 2,
    direction:3,
image:'url'
  },{
    time: 1,
    speed: 2,
    direction:3,
    image:'url'
    
  },{
    time: 1,
    speed: 2,
    direction:3,
image:'url' 
  }]

如何制作 table 第一列仅包含属性名称。然后后续列分别包含来自响应的数据，分别使用图像 URL 作为 header 我以前从未在 JS 中使用过 tables。它还需要是动态的，以便可以使用来自 object 的任意数量的键生成任意数量的响应结果，因为数组中的所有 objects 都将具有相同的键

理想情况下，我希望 table 看起来像这样我知道这很简单，但确实令人沮丧，因此我们将不胜感激

            image           image           image 
time          1               1               1 
speed         2               2               2
direction     3               3               3

Answer 1

不确定这是否是您想要的。您可以遍历对象的键和值。

  <table>
    <thead>
      <tr>
        <td />
        {response.map((el) => (
          <td>{el.image}</td>
        ))}
      </tr>
    </thead>
    <tbody>
      {Object.keys(response[0])
        .filter((k) => k !== "image")
        .map((k) => (
          <tr>
            <td>{k}</td>
            {response.map((r) => (
              <td>{r[k]}</td>
            ))}
          </tr>
        ))}
    </tbody>
  </table>

使用 Response 动态创建 table React JS

Using a Response to create a table React JS dynamically

html

javascript

css

reactjs

styled-components