javascript - 我怎样才能把它写成一个类组件？

Question

我在我的 App.js 中编写了一个函数来测试它是否运行，但想把它变成它自己的组件类。我尝试class ... ectends React.component结束导出表达式，但它根本没有编译。

该函数应该是一个带有 3 个测试问题的测验的测试版本，以测试结构是否有效。我希望能够通过以下方式实现该功能：

  <Route exact path="/play_quiz" component={play_quiz}></Route>

来自尚未完全实现的 index.js。

import './play_quiz.css';

export default function () {
    const questions = [
        {
            questionText: 'testquestion1',
            answerOptions: [
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'correct answer', isCorrect: true },
                { answerText: 'wrong answer', isCorrect: false },
            ],
        },
        {
            questionText: 'testquestion2',
            answerOptions: [
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'correct answer', isCorrect: true },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
            ],
        },
        {
            questionText: 'testquestion3',
            answerOptions: [
                { answerText: 'correct answer', isCorrect: true },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
            ],
        },

    ];

    const [currentQuestion, setCurrentQuestion] = useState(0);
    const [showScore, setShowScore] = useState(false);
    const [score, setScore] = useState(0);

    const handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) {
            setScore(score + 1);
        }

        const nextQuestion = currentQuestion + 1;
        if (nextQuestion < questions.length) {
            setCurrentQuestion(nextQuestion);
        } else {
            setShowScore(true);
        }
    };
    return (
        <div className='quiz-window'>
            {showScore ? (
                <div className='score-section'>
                    korrekt beantwortet: {score} von {questions.length}
                </div>
            ) : (
                <>
                    <div className='question-section'>
                        <div className='question-count'>
                            <span>Frage {currentQuestion + 1}</span>/{questions.length}
                        </div>
                        <div className='question-text'>{questions[currentQuestion].questionText}</div>
                    </div>
                    <div className='answer-section'>
                        {questions[currentQuestion].answerOptions.map((answerOption) => (
                            <button onClick={() => handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
                        ))}
                    </div>
                </>
            )}
        </div>
    );
}```

标签： javascriptreactjs

Answer 1

我将假设该组件确实按预期工作，您只想将其转换为类组件，而不是使用 react-hooks。我实际上不知道这样做有什么好处，我只会为你做，所以这是我的解决方案：

import './play_quiz.css';
import React from "react"

export class function extends React.Component {
  constructor() {
    super();
    this.state = {
      questions: [
        {
            questionText: 'testquestion1',
            answerOptions: [
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'correct answer', isCorrect: true },
                { answerText: 'wrong answer', isCorrect: false },
            ],
        },
        {
            questionText: 'testquestion2',
            answerOptions: [
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'correct answer', isCorrect: true },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
            ],
        },
        {
            questionText: 'testquestion3',
            answerOptions: [
                { answerText: 'correct answer', isCorrect: true },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
                { answerText: 'wrong answer', isCorrect: false },
            ],
        },

    ],
    currentQuestion: 0,
    showScore: false,
    score: 0
    }
  };  
  


    handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) {
            this.setState({score: score + 1});
        }

        const nextQuestion = currentQuestion + 1;
        if (nextQuestion < questions.length) {
          this.setState({
            currentQuestion: nextQuestion
          })
        } else {
          this.setState({
            showScore: true
          })
        }
    };

    const {showScore, score, questions, currentQuestion} = this.state;

    return (
        <div className='quiz-window'>
            {showScore ? (
                <div className='score-section'>
                    korrekt beantwortet: {score} von {questions.length}
                </div>
            ) : (
                <>
                    <div className='question-section'>
                        <div className='question-count'>
                            <span>Frage {currentQuestion + 1}</span>/{questions.length}
                        </div>
                        <div className='question-text'>{questions[currentQuestion].questionText}</div>
                    </div>
                    <div className='answer-section'>
                        {questions[currentQuestion].answerOptions.map((answerOption) => (
                            <button onClick={() => this.handleAnswerOptionClick(answerOption.isCorrect)}>{answerOption.answerText}</button>
                        ))}
                    </div>
                </>
            )}
        </div>
    );
}