javascript - JAVASCRIPT / REACT：为 for 循环中的每个元素返回 HTML

Question

我在 stackoverflow 上查看了其他一些答案，但找不到能回答我问题的答案。

我有一个变量 toolShortcuts ，它是一个由对象数组组成的对象：

toolShortcuts = {
  1: [{key: "s", description: "click this to scale"}],
  2: [{key: "delete", description: "click this to delete"}, {key: "backspace",description: "click this to delete"}]
}

我正在尝试为对象中的每个元素（上述对象中的 3 个元素）返回一些 HTML。由于我使用带有 return 语句的 for 循环，因此仅显示每个数组的第一个元素（3 个元素中的 2 个）。如何显示所有三个元素？

  <Container>
    { Object.values(toolShortcuts).map((shortcuts) => {
        for (let i in shortcuts) {
          return (
            <Row>
              <$DescriptionCol>{shortcuts[i].description}</$DescriptionCol>
              <$ButtonCol lg="3">{shortcuts[i].key}</$ButtonCol>
            </Row>
          )
        }
      })
    }
  </Container>

标签： javascripthtmlreactjsloops

Answer 1

<Container>
    {Object.values(toolShortcuts).map((shortcuts, indexTool) => (
        <React.Fragment key={indexTool}>
            {shortcuts.map((shortcut) => (
                <Row key={shortcut.key}>
                    <$DescriptionCol>{shortcut.description}</$DescriptionCol>
                    <$ButtonCol lg="3">{shortcut.key}</$ButtonCol>
                </Row>        
            ))}
        </React.Fragment>
    }
</Container>