我正在尝试映射对象数组,每个对象包含另一个嵌套的对象数组。但是,该映射不适用于嵌套数组。我如何映射嵌套数组的内容,同时将所有content
保留在父对象的相同title
下?
小提琴: https://jsfiddle.net/69z2wepo/249197/
数据结构如下:
[
{
title: "title1",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Campaigns",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Events",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "General",
description:
"Short description explaining the use of this design in a single sentence."
}
]
},
{
title: "title2",
content: [
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description:
"Short description explaining the use of this design in a single sentence."
}
]
}
];
地图看起来像
{dataItems.map((item, index) => {
return (
<h1>{item.title}</h1>
// for each item, loop over the content array objects
<img src={item.content.imageUrl} />
<h3>{item.content.title}</h3>
<h3>{item.content.description}</h3>
<hr />
);
})}
答案 0 :(得分:5)
由于每个元素都有一个content
数组,因此您还必须在map
上content
。
示例
{dataItems.map((item, index) => (
<div key={index}>
<h1>{item.title}</h1>
{item.content.map((c, i) => (
<div key={i}>
<img src={c.imageUrl} />
<h3>{c.title}</h3>
<h3>{c.description}</h3>
<hr />
</div>
))}
</div>
))}
答案 1 :(得分:1)
这是一个可行的示例。
const dataItems = [{
title: "title1",
content: [{
imageUrl: "http://placehold.it/300x300",
title: "Campaigns",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Events",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "General",
description: "Short description explaining the use of this design in a single sentence."
}
]
},
{
title: "title2",
content: [{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description: "Short description explaining the use of this design in a single sentence."
},
{
imageUrl: "http://placehold.it/300x300",
title: "Video Template A",
description: "Short description explaining the use of this design in a single sentence."
}
]
}
];
class App extends React.Component {
render() {
return <div>
{
dataItems.map((item, index) => {
return ( <div>
<h1>{item.title}</h1>
{ item.content.map((c, i) => <div>
<h3>{c.title}</h3>
<h3>{c.description}</h3>
</div>)}
</div>
)
})
}
</div>
}
}
ReactDOM.render( < App / > , document.getElementById('root'));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>