index.js

import React, { useState } from 'react';
import styles from './index.less';
import config from '@/config';
import { Button } from 'antd-mobile';
import classNames from 'classNames';
const Index = ({}) => {
  const [isShowAnswer, setIsShowAnswer] = useState(false);
  const [isSelected, setIsSelected] = useState(false);

  const options = [
    {
      id: 1,
      title: '前交通动脉',
      isRight: true,
    },
    {
      id: 1,
      title: '矩形备份',
      isRight: true,
    },
    {
      id: 1,
      title: '矩形备份',
      isRight: true,
    },
    {
      id: 1,
      title: '矩形备份',
      isRight: false,
    },
    {
      id: 1,
      title: '矩形备份',
      isRight: true,
    },
  ];

  const showAnswer = () => {
    setIsShowAnswer(true);
  };

  const selectOption=()=>{
  }

  const renderOption = () => {
    return options.map((item, index) => {
      return (
        <div
          className={classNames(
            styles.option,
            isShowAnswer && (item.isRight ? styles.right : styles.error),
            isSelected && styles.selected
          )}
        >
          {config.selectNo[index]}.{item.title}
          {isShowAnswer && (
            <img src={`/images/${item.isRight ? 'right' : 'error'}.png`} alt=""></img>
          )}
        </div>
      );
    });
  };
  return (
    <div className={styles.root}>
      <div className={styles.title}>
        2/211、脑底动脉环在脑循环中起着非常重要的作用，能沟通脑前脑、后、左、右的血液供应，下列哪条动脉不参与脑底动脉环的组成？
      </div>
      <div className={styles.options}>{renderOption()}</div>
      {isShowAnswer && (
        <div className={styles.answer}>
          <div className={styles.rightAnswer}>正确答案为：B</div>
          <div className={styles.analysis}>
            <span>题型解析</span>
            ：脑底动脉环的组成包括颈内动脉，大脑前动脉起始段，前交通动脉，大脑后动脉和后交通动脉，不包括椎动脉。
          </div>
        </div>
      )}
      {!isShowAnswer && (
        <div className={styles.submit}>
          <Button type="primary" onClick={showAnswer}>
            查看答案
          </Button>
        </div>
      )}
      <div className={styles.action}>
        <div className={styles.pre}>上一题</div>
        <div className={styles.input}>
          跳转到
          <input type="text" />题
        </div>
        <div className={styles.next}>下一题</div>
      </div>
    </div>
  );
};

export default Index;