Reactjs Antd React表将数组拆分为不同的行

我需要将数组分成不同的行，而不是一行。我用json结构外观的示例数据制作了一个代码笔。数据源总是一个大小为1的数组

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

const columns = [
  {
    title: "Classes",
    dataIndex: "classes"
  },
  {
    title: "Grades",
    dataIndex: "grades"
  },
  {
    title: "Credentials",
    dataIndex: ["classMap", "Teacher with credentials"]
  },
  {
    title: "No Credentials",
    dataIndex: ["classMap", "Teacher no credentials"]
  }
];

const data = [
  {
    key: "1",
    classes: ["Chinese", "Italian"],
    grades: ["98", "64"],
    classMap: {
      "Teacher with credentials": ["School board cred", "Teaching school"],
      "Teacher no credentials": ["no credentials"]
    }
  }
];

ReactDOM.render(
  <Table columns={columns} dataSource={data} pagination={false} />,
  document.getElementById("container")
);

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Table}；
常量列=[
{
标题：“班级”，
数据索引：“类”
},
{
标题：“等级”，
数据索引：“等级”
},
{
标题：“全权证书”，
dataIndex:[“类地图”，“具有证书的教师”]
},
{
标题：“无凭证”，
dataIndex:[“类地图”，“教师无凭证”]
}
];
常数数据=[
{
关键：“1”，
课程：[“中文”、“意大利文”]，
职系：[“98”、“64”]，
类映射：{
“有资格证书的教师”：[“学校董事会信誉”，“教学学校”]，
“教师无证书”：[“无证书”]
}
}
];
ReactDOM.render(
,
document.getElementById（“容器”）
);

看看在表中显示时，classes列如何只显示数组中的两个项目，我需要它们位于不同的行上