我用React
应用程序打了一个兔子洞。我looping
通过这个对象数组:
const weeklyClasses = [
{
id: 1,
day: "Monday",
classDescription: [
{ classType: "11am-12pm Jazz", teacher: "Joe" },
{ classType: "1pm-2pm Blues", teacher: "Doe" },
{ classType: "3pm-4pm Samba", teacher: "Zen" }
]
},
{
id: 1,
day: "Tuesday",
classDescription: [
{ classType: "11am-12pm Rock", teacher: "Sis" },
{ classType: "1pm-2pm Tango", teacher: "Ter" },
{ classType: "3pm-4pm Salsa", teacher: "Soul" }
]
},
// ...
];
我正在循环并检索所需的值,但是,目前classType
输出为p
const Data = () => {
return weeklyClasses.map((o, i) => {
return (
<div className="classDay" key={o.id}>
{o.day}
<div className="classType">
{o.classType}
//Right here
<p>{o.classDescription.map(i => i.classType)}</p>
</div>
</div>
);
});
};
如何将每个 classType
输出为 diff p
标签?
在地图上映射是否可以? (我应该怎样才能使用reduce?)
答案 0 :(得分:7)
而不是将整个描述数组包装成单个p
:
<p>{o.classDescription.map(i => i.classType)}</p>
您可以将每个类描述元素包装成p
而不是:
{o.classDescription.map(i => <p>{i.classType}</p> )}
{/* ^^^ ^^^^ */}