index.js

import React from 'react';
import styles from './index.less';
import router from 'umi/router';

const images = [
  {
    key: 'single',
    image: '/images/danxuanti.png',
    title: '单选题',
  },
  {
    key: 'multiple',
    image: '/images/duoxuanti.png',
    title: '多选题',
  },
  {
    key: 'judgment',
    image: '/images/panduanti.png',
    title: '判断题',
  },
  {
    key: 'completion',
    image: '/images/tiankongti.png',
    title: '填空题',
  },
  {
    key: 'short',
    image: '/images/jiandati.png',
    title: '简答题',
  },
  {
    key: 'caseChoice ',
    image: '/images/anlixuanzeti.png',
    title: '案例选择题',
  },
  {
    key: 'caseMultiple',
    image: '/images/mingcijieshi.png',
    title: '名词解释',
  },
  {
    key: 'b1',
    image: '/images/b1tixing.png',
    title: 'B1题型',
  },
  {
    key: 'argumentation',
    image: '/images/lunshuti.png',
    title: '论述题',
  },
  {
    key: 'analytical ',
    image: '/images/fenxiti.png',
    title: '分析题',
  },
];
const goPage = key => {
  router.push(`/exam/question/${key}`);
};

const renderMenu = () => {
  const menus = [];
  for (let i = 0; i < images.length; ) {
    if (i % 3 === 0) {
      console.log(i)
      console.log(images[i])
      console.log(images[i + 1])
      console.log(images[i + 2])
     const v1= images[i]
     const v2=images[i + 1]
     const v3=  images[i + 2]
      menus.push(
        <div className={styles.row} key={i}>
          <div className={styles.col} key={v1.key} data-id={v1.key}>
            <img src={v1.image} alt="" onClick={()=>goPage(v1.key)} />
            <span>{v1.title}</span>
          </div>
         {i+1< images.length &&  <div className={styles.col} key={v2.key} data-id={i+ 1}>
            <img src={v2.image} alt="" onClick={()=>goPage(v2.key)} />
            <span>{v2.title}</span>
          </div>}
          {i+2< images.length && <div className={styles.col} key={v3.key} data-id={i+ 2}>
            <img src={v3.image} alt="" onClick={()=>goPage(v3.key)} />
            <span>{v3.title}</span>
          </div>}
        </div>
      );
    }
    i += 3;
  }
  return menus;
};
const Index = () => {
  return <div className={styles.root}>{renderMenu()}</div>;
};

export default Index;