Javascript 在html表中循环数据时如何将行与多级合并

const myData = [
  {
    subject: "Math",
    class: [
      {
        name: "Math-01",
        results: [
          {student: "jame",score: "10"},
          {student: "kelvin",score: "4"},
          { student: "smith",score: "8"}
        ]
      },
      {
        name: "Math-02",
        results: [
          { student: "joe",score: "8"},
          {student: "yassou",score: "8"}
        ]
      }
    ]
  },
  {
    subject: "History",
    class: [
      {
        name: "History-01",
        results: [
          {student: "zoe", score: "6"},
          {student: "jame", score: "8"},
          {student: "bean", score: "9"}
        ]
      },
      {
        name: "History-02",
        results: [
          {student: "luffy", score: "10"},
        ]
      }
    ]
  },
  {
    subject: "literature",
    class: [
      {
        name: "literature-01",
        results: [
          {student: "nami", score: 5}
        ]
      },
      {
        name: "literature-02",
        results: [
          {student: "zoro", score: 3}
        ]
      },
      {
        name: "literature-03",
        results: [
          {student: "shank", score: 5}
        ]
      }
    ]
  },
  {
    subject: "literature",
    class: [
      {
        name: "literature-01",
        results: []
      },
      {
        name: "literature-02",
        results: [ {student: "zoro", score: 3} ]
      },
      {
        name: "literature-03",
        results: [ {student: "shank", score: 5} ]
      }
    ]
  }
];

function App() {
  return (
    <table>
      {
        myData.map((record, i) => {
          let subjectHandled = false;
          return record.class.map((course, j) => {
            return course.results.map((r, k) => {
              let subjectTdEl;
              
              if (!subjectHandled && k === 0) {
                let resultsCount = 0;
                
                record.class.forEach((c) => {
                  resultsCount += c.results.length;
                });
                
                subjectTdEl = <td rowSpan={resultsCount}>{record.subject}</td>
                
                subjectHandled = true;
              }
              
              let courseTdEl;
              if (k === 0) {
                courseTdEl = <td rowSpan={course.results.length}>{course.name}</td>;
              }
              
              return (
                <tr key={k}>
                  {subjectTdEl}       
                  {courseTdEl}
                  <td>{r.student}</td>
                  <td>{r.score}</td>
                </tr>
              );
            });
          });
        })
      }
    </table>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

table {
  font-family: verdana;
  border-collapse: collapse;
}

table, th, td {
  padding: 10px;
  border: 1px solid black;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>