react组件，每3个item插入一个分隔符

Question

下面有个react组件：

import React from "react"

const students=[
    {"name": "赵一","id": "G50061"},
    {"name": "钱二","id": "G50065"},
    {"name": "孙三","id": "G50072"},
    {"name": "李四","id": "G50075"},
    {"name": "周五","id": "G50079"},
    {"name": "吴六","id": "G50081"},
    {"name": "郑七","id": "G50083"},
    {"name": "冯八","id": "G50062"},
    {"name": "王九","id": "G50064"},
    {"name": "陈十","id": "G50067"},
    {"name": "褚十一","id": "G50069"},
    {"name": "卫十二","id": "G50085"},
    {"name": "蒋十三","id": "G50090"},
    {"name": "沈十四","id": "G50073"},
    {"name": "韩十五","id": "G50077"}
];

const studentItems = students.map((student) =>
    <div key={student.id}>{student.name}</div>
);

const separator='<div>----我是分割符----</div>'; //每隔3个student插入一个separator

export default () => (
    <div>
        {studentItems}
    </div>
)

问题：
我想每隔3个student插入一个separator（分隔符），应该怎么打断循环并插入分隔符呢？

Answer 1

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const students=[
    {"name": "赵一","id": "G50061"},
    {"name": "钱二","id": "G50065"},
    {"name": "孙三","id": "G50072"},
    {"name": "李四","id": "G50075"},
    {"name": "周五","id": "G50079"},
    {"name": "吴六","id": "G50081"},
    {"name": "郑七","id": "G50083"},
    {"name": "冯八","id": "G50062"},
    {"name": "王九","id": "G50064"},
    {"name": "陈十","id": "G50067"},
    {"name": "褚十一","id": "G50069"},
    {"name": "卫十二","id": "G50085"},
    {"name": "蒋十三","id": "G50090"},
    {"name": "沈十四","id": "G50073"},
    {"name": "韩十五","id": "G50077"}
]

function App() { 
  const separator=<div>----我是分割符----</div>
  var jsx = []
  students.forEach((student,index)=>{
    if(index % 4 ===3){
      jsx.push(separator)
    }
    else {
      jsx.push(
        <div key={student.id}>{student.name}</div>
      )
    }
  })
  return (
    <div>
      {
        jsx
      }
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);