Question

我有一个反应代码，其中我有一个导入问题框和答案框的父文件。

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 将消失，反之亦然。我找到了一些答案，但它们没有用。帮我解决这个问题？

Answer 1

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 来隐藏它

单击时更改组件的样式 - 反应钩子状态

1 个答案: