如何遍历给定结构的对象，生成指定的JSX结构？

原生JavaScript实现 #

可以通过Object.entries()遍历对象的键值对，动态创建DOM元素来生成目标结构：

const data = {
  products: {
    "women": [
      { "id": 1, "name": "miho", "image": "../../thumbs/miho.jpg" },
      { "id": 2, "name": "gaga", "image": "../../thumbs/gaga.jpg" }
    ],
    "men": [
      { "id": 1, "name": "teatea", "image": "../../thumbs/teatea.jpg" }
    ]
  }
};

const container = document.createElement('div');

// 遍历每个商品分类
Object.entries(data.products).forEach(([category, items]) => {
  // 创建分类标题
  const title = document.createElement('div');
  title.className = 'keyOfObject';
  title.textContent = category;
  container.appendChild(title);

  // 创建商品列表容器
  const listWrapper = document.createElement('div');
  listWrapper.className = 'products-list';

  // 遍历当前分类下的所有商品
  items.forEach(item => {
    const productItem = document.createElement('div');
    productItem.className = 'product';

    // 生成图片容器，设置背景图
    const imageBox = document.createElement('div');
    imageBox.className = 'image';
    imageBox.style.backgroundImage = `url(${item.image})`;

    // 生成商品名称
    const nameBox = document.createElement('div');
    nameBox.className = 'name';
    nameBox.textContent = item.name;

    productItem.appendChild(imageBox);
    productItem.appendChild(nameBox);
    listWrapper.appendChild(productItem);
  });

  container.appendChild(listWrapper);
});

// 把生成的结构挂载到页面
document.body.appendChild(container);

React（JSX）实现 #

如果是React项目，直接用JSX的遍历语法即可生成目标结构，核心还是用Object.entries()处理对象：

import React from 'react';

const ProductCategoryList = () => {
  const data = {
    products: {
      "women": [
        { "id": 1, "name": "miho", "image": "../../thumbs/miho.jpg" },
        { "id": 2, "name": "gaga", "image": "../../thumbs/gaga.jpg" }
      ],
      "men": [
        { "id": 1, "name": "teatea", "image": "../../thumbs/teatea.jpg" }
      ]
    }
  };

  return (
    <div>
      {Object.entries(data.products).map(([category, items]) => (
        <React.Fragment key={category}>
          <div className="keyOfObject">{category}</div>
          <div className="products-list">
            {items.map(product => (
              <div key={product.id} className="product">
                <div 
                  className="image" 
                  style={{ backgroundImage: `url(${product.image})` }}
                />
                <div className="name">{product.name}</div>
              </div>
            ))}
          </div>
        </React.Fragment>
      ))}
    </div>
  );
};

export default ProductCategoryList;

核心要点 #

• Object.entries()可以把对象转换成[分类名, 商品数组]的格式，方便同时获取键和对应的值
• React中遍历元素必须添加唯一key，避免渲染警告
• 背景图样式要使用backgroundImage属性，注意URL的引号嵌套格式

内容的提问来源于stack exchange，提问作者jungjuyoung