每日一题，接口差分类

src/components/examination/examination.scss

@@ -6,10 +6,12 @@
     display: flex;
     flex-direction: column;
     height: calc(100% - 44px);
+    padding-bottom: 44px;
 
     .topic {
         @include padding;
         font-size: $font_16;
+        line-height: 30px;
     }
 
     .category-tag {
@@ -47,6 +49,7 @@
             margin-bottom: 7px;
             padding-top: $padding;
             padding-bottom: $padding;
+            line-height: 30px;
         }
 
         .alphabet {
@@ -95,9 +98,6 @@
         }
     }
 
-    .saq-content {
-        @include padding;
-    }
 }
 
 @keyframes slideInDown {

src/components/examination/index.js

-import React from 'react'
+import React, { PureComponent } from 'react'
 import './examination.scss'
 import classnames from 'classnames'
 
 import { Tag } from '../../common'
 import OpenApp from './OpenApp'
+import { api } from '@/utils'
 
-const mockData = {
-    id: 2,
-    type: 1,
-    options: [
-        {
-            ans: '频繁模式挖掘',
-            id: 1,
-        },
-        {
-            ans: '分类和预测',
-            id: 2
-        },
-        {
-            ans: '数据预处理',
-            id: 3
-        },
-        {
-            ans: '数据流挖掘',
-            id: 4
-        },
-    ],
-    ans: 2,
-    question: '将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务（）'
-}
-
-const answer = '@nishizhen：个人感觉逻辑回归和线性回归首先都是广义的线性回归，\n' +
-    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
-    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
-    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
-    '其次经典线性模型的优化目标函数是最小二乘，而逻辑回归则是似然函数，\n' +
-    '另外线性回归在整个实数域范围内进行预测，敏感度一致，而分类范围，需要在[0,1]。逻辑回归就是一种减小预测范围，将预测值限定为[0,1]间的一种回归模型，因而对于这类问题来说，逻辑回归的鲁棒性比线性回归的要好。\n' +
-    '                        '
-
-const saq = '例子：\n' +
-    ' >>>find_string(\'hello\\nworld\\n\',\'wor\')\n' +
-    '[\'wor\']\n' +
-    '>>>find_string(\'hello\\nworld\\n\',\'l*d\')\n' +
-    '[\'ld\']\n' +
-    '>>>find_string(\'hello\\nworld\\n\',\'o.\')\n' +
-    '[\'or\']\n'
-
-export default class Examination extends React.Component {
+export default class Examination extends PureComponent {
 
     constructor(props) {
         super(props)
         this.state = {
-            isShowAnswer: false
+            isShowAnswer: false,
+            questionData: {}
         }
     }
 
     componentDidMount() {
-        document.getElementsByClassName('tabbar')[0].style.display = 'none';
+        api.get('/m/dailyQuestion')
+            .then(res => {
+                this.setState({
+                    questionData: res.data.data
+                })
+            })
     }
 
     showAnswer = () => {
@@ -64,24 +30,27 @@ export default class Examination extends React.Component {
     }
 
     render() {
+        // let {ques, type_id, options, analysis} = this.state.questionData
+        let {
+            questionData: {
+                ques, type_id, options, analysis
+            },
+            isShowAnswer
+        } = this.state
         return (
             <div className='examination'>
                 <div className="question-container">
                     <div className="topic">
                         <Tag className='category-tag'>深度学习</Tag>
-                        {mockData.question}
+                        {ques}
                     </div>
                     {
-                        mockData.type === 1 ? (
-                            <MultipleChoice className='options' options={mockData.options}
-                                            correct={mockData.ans}
+                        type_id === 1 && <MultiChoice className='options' options={options}
                                                          showCorrect={this.state.isShowAnswer}
                         />
-                        ) : <SAQ content={saq}/>
-
                     }
                     {
-                        !this.state.isShowAnswer &&
+                        !isShowAnswer &&
                         (
                             <div className="show-answer" onClick={this.showAnswer}>
                                 <span>查看解析<i className='iconfont iconiconfront-69'></i></span>
@@ -90,38 +59,30 @@ export default class Examination extends React.Component {
                     }
                 </div>
                 {
-                    this.state.isShowAnswer && <Answer content={answer} isShowAnswer></Answer>
+                    isShowAnswer && <Answer content={analysis} isShowAnswer/>
                 }
-                <OpenApp></OpenApp>
+                <OpenApp/>
             </div>
         )
     }
 }
 
-function MultipleChoice({options, correct, showCorrect}) {
+const MultiChoice = React.memo(({options, showCorrect}) => {
     return (
         <ul className='options'>
             {
                 options.map((item, index) => (
-                    <li key={index} className={classnames('option', {'active': correct === item.id && showCorrect})}>
+                    <li key={index} className={classnames('option', {'active': item.is_ans === 1 && showCorrect})}>
                         <span className="alphabet">{String.fromCharCode(65 + index)}</span>
-                        {item.ans}
+                        {item.des}
                     </li>
                 ))
             }
         </ul>
     )
-}
-
-function SAQ({content}) {
-    return (
-        <p className={'saq-content'}>
-            {content}
-        </p>
-    )
-}
+})
 
-function Answer({content, isShowAnswer}) {
+const Answer = React.memo(({content, isShowAnswer}) => {
     return (
         <div className={classnames('answer', {scale: isShowAnswer})}>
             <p className='legend'>解析</p>
@@ -129,7 +90,5 @@ function Answer({content, isShowAnswer}) {
                 {content}
             </p>
         </div>
-
     )
-}
-
+})