我將如何在此代碼中添加 if..else 語句？

Question

我目前正在使用 ReactJS 創建一個測驗，但我想在測驗完成后放入 if/else 語句，如果參加測驗的人得分低於 3 我希望它有一張悲傷的臉，如果高於 3 那么一個快樂的人，我如何將其放入我的代碼中？

到目前為止，我已經嘗試合並 if 語句，但運氣不佳

結果.js

import React from 'react';

const Result = ({ score, playAgain }) => (
  <div className="score-board">
    <div className="score">You scored {score} / 5 correct answers!</div>
    <button className="playBtn" onClick={playAgain}>
      Play again!
    </button>
  </div>
);

export default Result;

索引.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './assets/style.css';
import quizService from './quizService';
import QuestionBox from './components/QuestionBox';
import Result from './components/Result';

class QuizBee extends Component {
  state = {
    questionBank: [],
    score: 0,
    responses: 0,
  };
  getQuestions = () => {
    quizService().then((question) => {
      this.setState({
        questionBank: question,
      });
    });
  };
  computeAnswer = (answer, correctAnswer) => {
    if (answer == correctAnswer) {
      this.setState({
        score: this.state.score + 1,
      });
    }
    this.setState({
      responses: this.state.responses < 5 ? this.state.responses + 1 : 5,
    });
  };
  playAgain = () => {
    this.getQuestions();
    this.setState({
      score: 0,
      responses: 0,
    });
  };
  componentDidMount() {
    this.getQuestions();
  }

  render() {
    return (
      <div className="container">
        <div className="title">QuizBee</div>
        {this.state.questionBank.length > 0 &&
          this.state.responses < 5 &&
          this.state.questionBank.map(({ question, answers, correct, questionId }) => (
            <QuestionBox
              question={question}
              options={answers}
              key={questionId}
              selected={(answer) => this.computeAnswer(answer, correct)}
            />
          ))}

        {this.state.responses === 5 ? <Result score={this.state.score} playAgain={this.playAgain} /> : null}
      </div>
    );
  }
}

ReactDOM.render(<QuizBee />, document.getElementById('root'));

Answer 1

在 Result.js 中，您可以將邏輯添加為

import React from "react";

const Result = ({score, playAgain}) => (
  <div className="score-board">
  <div className="score">You scored {score} / 5 correct answers!</div>

  {score <=3 ? <SadFace/> : <HappyFace/>}

  <button className="playBtn" onClick={playAgain}>
    Play again!
   </button>
  </div>
);

export default Result;

Answer 2

您可以在 Result 組件中執行此操作：

import React from "react";

const Result = ({score, playAgain}) => (
<div className="score-board">
<img src={score <= 3 ? "sad.png" : "happy.png" } /> // <----- HERE
<div className="score">You scored {score} / 5 correct answers!</div>
<button className="playBtn" onClick={playAgain}>
  Play again!
  </button>
 </div>
 );

export default Result;