我有一个react代码，其中有一个导入问题框和答案框的父文件。
import React, { useState } from "react";
import QuestionBox from "./QuestionBox";
import AnswerBox from "./AnswerBox";
const MainBox = () => {
const [answer, toggleShowAnswer] = useState(<AnswerBox />);
const faqAnswerHandler = function() {
toggleShowAnswer((answer.style.visibility = "hidden"));
};
return (
<div>
<QuestionBox />
<AnswerBox />
</div>
);
};
export default FaqBox;
我想要实现的是，当我点击QuestionBox组件时，AnswerBox将消失，反之亦然。我找到了一些答案，但没有用。帮我做这个？
import React, { useState } from "react";
import QuestionBox from "./QuestionBox";
import AnswerBox from "./AnswerBox";
const MainBox = () => {
const [answer, toggleShowAnswer] = useState(false);
const faqAnswerHandler = function() {
toggleShowAnswer(!answer);
};
return (
<div>
<QuestionBox onClick={faqAnswerHandler} />
{answer && <AnswerBox />}
</div>
);
};
export default FaqBox;
这会做你想做的事。呈现或不基于答案
但是你当然可以操纵CSS来隐藏它或者不隐藏