如何在 JavaScript 中包装 HTML 以便遍历字典并添加到 flex 容器？

Question

我有这个代码：

      <ul className="flex-container"> {
            Object.keys(this.state.filestest).forEach(function(key) {
            <div className="Tile">
                *do stuff
            </div>
            });
        }
        </ul>

“filestest”是一个字符串到字符串的字典。 我想要做的就是能够遍历 filestest，并为字典中的每个项目添加一个 className 为“Tile”的 div。 我写的上面的代码在分号上给出了一个错误，我尝试编写它的其他方法不起作用。 我认为这涉及 jQuery 或其他东西，但我不熟悉 jQuery。 （我还需要访问字典的键和值）。

Answer 1

在 reactjs 你会做这样的事情（注意地图而不是 forEach）：

// inside your react component:
render() {
  return (
      <ul className="flex-container"> {
            Object.keys(this.state.filestest).map(function(key) {
               return (<div className="Tile">
                {key}
               </div>)
            });
        }
        </ul>
  )
}