遍历嵌套的对象数组，呈现不同的标记

Question

我用 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>
    );
  });
};

如何将 each classType 输出为 diff p 标签？

在地图上作图可以吗？（我应该，我怎么能）改用 reduce？

Answer 1

而不是将整个描述数组包装成一个 p:

<p>{o.classDescription.map(i => i.classType)}</p>

您可以将每个 class 描述元素包装到 p 中：

{o.classDescription.map(i => <p>{i.classType}</p> )}
{/*                          ^^^             ^^^^  */}

遍历嵌套的对象数组，呈现不同的标记

Loop through Nested Array of Objects, Rendering Different Markup

javascript

reduce

ecmascript-6

reactjs