list.js

import React from 'react';
import styles from './list.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])
      menus.push(
        <div className={styles.row} key={i}>
          <div className={styles.col} key={images[i].key}>
            <img src={images[i].image} alt="" onClick={()=>goPage(images[i].key)} />
            <span>{images[i].title}</span>
          </div>
         {i+1< images.length &&  <div className={styles.col} key={images[i+ 1].key}>
            <img src={images[i + 1].image} alt="" onClick={()=>goPage(images[i + 1].key)} />
            <span>{images[i + 1].title}</span>
          </div>}
          {i+2< images.length && <div className={styles.col} key={images[i+ 2].key}>
            <img src={images[i + 2].image} alt="" onClick={()=>goPage(images[i + 2].key)} />
            <span>{images[i + 2].title}</span>
          </div>}
        </div>,
      );
    }
    i += 3;
  }
  return menus;
};
const Index = () => {
  return <div className={styles.root}>{renderMenu()}</div>;
};

export default Index;