英文:
How should I traverse the object to create jsx using the form of the object as shown below?
问题
以下是翻译好的部分：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
{
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"
}
]
}
}
<!-- language: lang-html -->
<div>
<div className="keyOfObject">women<div>
<div className="products-list">
<div className="product">
<div className="image" style={{background: url(../../thumbs/miho.jpg)}}/>
<div className="name">miho<div>
</div>
<div className="product">
<div className="image" style={{background: url(../../thumbs/gaga.jpg)}}/>
<div className="name">gaga<div>
</div>
</div>
<div className="keyOfObject">men<div>
<div className="products-list">
<div className="product">
<div className="image" style={{background: url(../../thumbs/teatea.jpg)}}/>
<div className="name">teatea<div>
</div>
</div>
</div>
<!-- end snippet -->
请注意，上述文本中已经去除了代码部分，只保留了HTML和相关内容。
英文:
I want to create the HTML syntax below.
How do I make an element corresponding to the title with the key of the object, and make a list of details while traversing the array to value?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
{
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"
}
]
}
}
<!-- language: lang-html -->
<div>
<div className="keyOfObject">women<div>
<div className="products-list">
<div className="product">
<div className="image" style={{background: url(../../thumbs/miho.jpg)}}/>
<div className="name">miho<div>
</div>
<div className="product">
<div className="image" style={{background: url(../../thumbs/gaga.jpg)}}/>
<div className="name">gaga<div>
</div>
</div>
<div className="keyOfObject">men<div>
<div className="products-list">
<div className="product">
<div className="image" style={{background: url(../../thumbs/teatea.jpg)}}/>
<div className="name">teatea<div>
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 0
以下是您要的代码部分的翻译：
export function Component(data) {
return (
<div>
{Object.entries(data).map(([key, productsList]) => {
return (
<div key={`${key}-keyOfObject`} className="keyOfObject">
{key}
</div>
<div key={`${key}-productsList`} className="products-list">
{productsList.map((product) => {
return (
<div className="product" key={product.id}>
<div className="image" style={`background: url(${product.image})`}></div>
<div className="name">{product.name}</div>
</div>
);
})}
</div>
);
})}
</div>
);
}
但如果您希望keyOfObject和productsList divs有一个父div，可以这样修改：
export function Component(data) {
return (
<div>
{Object.entries(data).map(([key, productsList]) => {
return (
<div key={`${key}-container`} className="container">
<div key={`${key}-keyOfObject`} className="keyOfObject">
{key}
</div>
<div key={`${key}-productsList`} className="products-list">
{productsList.map((product) => {
return (
<div className="product" key={product.id}>
<div className="image" style={`background: url(${product.image})`}></div>
<div className="name">{product.name}</div>
</div>
);
})}
</div>
</div>
);
})}
</div>
);
}
这将在每个keyOfObject和productsList div的外部包装一个父div，使结构更清晰。
英文:
Something like this:
export function Component(data) {
return (
<div>
{Object.entries(data).map(([key, productsList]) => {
return (
<>
<div key={`${key}-keyOfObject`} className="keyOfObject">
{key}
</div>
<div key={`${key}-productsList`} className="products-list">
{productsList.map((product) => {
return (
<div className="product" key={product.id}>
<div className="image" style={`background: url(${product.image})`}></div>
<div className="name">{product.name}</div>
</div>
);
})}
</div>
</>
);
})}
</div>
);
}
But it will be better if you will have a parent div for keyOfObject and productsList divs
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论