用于全品服务的组件库 react ts 版本

组件使用方法

node 版本 17.9.0
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",

npm i cp_fan_components_react --save
import { QuestionItem } from 'cp_fan_components_react/index';
<QuestionItem
  ques={ques}
  showQuestionNum={true}
  questionIndex="1"
  showKnowledge={false}
  showExplain={true}
></QuestionItem>

样例演示代码

import { CpQuestionDetail } from 'cp_fan_components_react/index';
const CpQuestionExample: React.FC = () => {
  return <CpQuestionDetail></CpQuestionDetail>;
};

参数描述

type QuestionItemType = {
  ques: any; // 全品 试题 数据
  showQuestionNum?: boolean; // 是否显示大题题号
  questionIndex?: number | string; // 题号顺序
  showExplain?: boolean; // 是否显示 答案解析
  showKnowledge?: boolean; // 是否显示 知识点
};
ques :单个试题对象 基本结构
{
    questionId: '8f06016e-3f7a-4e99-9d2e-3d5e41f595f4',
    source: 1,
    stageSubject: { code: '1313', name: '高中英语' },
    context: {
        stem: '题干内容',
        audio: null,
        original_text: null,
        options: null,
    },
    quesType: { code: '24', name: '阅读理解' },
    quesStruct: { code: '16', name: '多小题模板' },
    knowledge:[],
    children:[]
}

试题样式问题

如果 自己写 试题渲染器
试题内容的样式
第一种方法
在组件中找到
import 'cp_fan_components_react/assets/css/question_style.css'

第二种方法
http://static-file-01-cdn.canpoint.cn/tiku/img/question_style.css?t=20201022
放入 index.html
<link rel="stylesheet" href="http://static-file-01-cdn.canpoint.cn/tiku/img/question_style.css?t=20201022" />

第三中方法
# 无法引入  由销售提供的样式