条件渲染 JSX

Question

当我点击一个按钮时，我有几行 JSX 想要 show/hide。

我已将状态初始化为：

const [shown, setShown] = useState(true);

这是 JSX :

      <div className="question--section">
        <div className="question--count">
          <span>Question {props.class[currentQuestion].id} </span>
          <h1>{props.class[currentQuestion].questionText}</h1>
        </div>
      </div>

我已经尝试这样做了：

{shown ? (
     <div className="question--section">
        <div className="question--count">
          <span>Question {props.class[currentQuestion].id} </span>
          <h1>{props.class[currentQuestion].questionText}</h1>
        </div>
      </div>) :
       (<div>Empty</div>)}

没用。我应该如何处理这个问题？（切换状态应该hide/show JSX）

整个组件：

import React from "react";
import { useState } from "react";

const Quiz = (props) => {
  const [currentQuestion, setCurrentQuestion] = useState(0);

  const [shown, setShown] = useState(true);
  
  const handleAnswerButtonClick = () => {
    if (currentQuestion + 1 < props.class.length) {
      setCurrentQuestion((prevQuestion) => prevQuestion + 1);
    } else {
      alert("End of the quiz!");
    }
  };
  return (
    <div className="container quiz--container">
      <button>Κεφάλαιο 1</button>
      {shown ? (
      <div>
        <h1>Κεφάλαιο {props.id}</h1>
        <div className="question--section">
          <div className="question--count">
            <span>Question {props.class[currentQuestion].id} </span>
            <h1>{props.class[currentQuestion].questionText}</h1>
          </div>
        </div>
        <div className="answer-section">
          {props.class[currentQuestion].answers.map((answer) => (
            <button onClick={handleAnswerButtonClick}>{answer.answerText}</button>
          ))}
        </div>) : 
        (<div>Empty</div>)}
  
    </div>
  );
};

export default Quiz;

Answer 1

您在 : 之前缺少结束语 </div>。

应该是这样的：

<div className="container quiz--container">
      <button>Κεφάλαιο 1</button>
      {shown ? (
      <div>
        <h1>Κεφάλαιο {props.id}</h1>
        <div className="question--section">
          <div className="question--count">
            <span>Question {props.class[currentQuestion].id} </span>
            <h1>{props.class[currentQuestion].questionText}</h1>
          </div>
        </div>
        <div className="answer-section">
          {props.class[currentQuestion].answers.map((answer) => (
            <button onClick={handleAnswerButtonClick}>{answer.answerText}</button>
          ))}
        </div>
        </div>) : 
        (<div>Empty</div>)}
    </div>

Answer 2

在 handleAnswerButtonClick 回调中，将 Shown 设置为 false 或反转它。

const handleAnswerButtonClick = () => {
  setShown(false)
  // or
  setShown(!shown)
  ...    
}

条件渲染 JSX

Conditional rendering JSX

reactjs