条件渲染JSX

Question

我想在点击按钮时显示/隐藏一些JSX行。

我已经初始化状态如下:

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>)}

它不工作。我该如何处理这个问题?(切换状态应该隐藏/显示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回调中，setshow为false或反转。

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