javascript - 单击图标时如何打开每个项目的 Accordion ？

Question

我在 reactjs 中创建了一个 Accordion 类型的组件，当我打开第一个切换时，只有切换一个内容应该打开，当点击第二个切换时，切换一个内容应该关闭并且只有切换第二个内容应该打开(只有一次应打开一个开关)。但就我而言，每次打开同一个 div 时。我不知道我哪里做错了？以及如何解决？下面是我的代码

import React, { useState } from "react";
import { FaPlus, FaMinus } from "react-icons/fa";
import "./FAQ.scss";
import { Collapse } from "reactstrap";

const Question = (props) => {
    const [isOpen, setIsOpen] = useState(false);

    const toggle = () => setIsOpen(!isOpen);

    return (
        <div className="question">
            <div>
                <button onClick={toggle}>
                    {isOpen ? <FaMinus /> : <FaPlus />}
                </button>
            </div>
            <div onClick={toggle} className='title'>
                {props.question}
            </div>
                <Collapse isOpen={isOpen} className='content'>
                    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for 
                    those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" 
                    by Cicero are also reproduced in their exact original form, accompanied by English 
                    versions from the 1914 translation by H. Rackham.
                </Collapse>
            <hr />
        </div>
    );
};

function FAQ() {
    return (
        <div className="faq" id='faq'>
            <h2>F.A.Q.</h2>
            <div className="faq-section">
                <Question question="Question one" />
                <Question question="Question two" />
                <Question question="Question three" />
                <Question question="Question four" />
                <Question question="Question five" />
            </div>
        </div>
    );
}

export default FAQ;

截图如下

更新问题

下面是一个网站的链接，底部有常见问题解答部分，我正在尝试像他们一样制作切换功能。 FAQ section in the bottom of this website

Answer 1

问题

这里的问题是所有 Question 组件都有自己的状态，独立于其他组件。

解决方案

如果您只想一次打开一个Question，则需要解除状态并在FAQ 中声明。这样一来，打开/展开的内容就有了单一的真实来源。

常见问题

将 isOpen 状态和切换处理程序移动到此父组件。使用“id”打开/关闭您要扩展的问题组件。将 isOpen 和 toggle 属性传递给每个 Question 组件，并在此处处理 id 逻辑。

function FAQ() {
  const [isOpen, setIsOpen] = useState(null);

  const toggleOpen = id => () => setIsOpen(
    isOpen => isOpen === id ? null : id,
  );

  return (
    <div className="faq" id='faq'>
      <h2>F.A.Q.</h2>
      <div className="faq-section">
        <Question
          question="Question one"
          isOpen={isOpen === 0}
          toggle={toggleOpen(0)}
        />
        <Question
          question="Question two"
          isOpen={isOpen === 1}
          toggle={toggleOpen(1)}
        />
        <Question
          question="Question three"
          isOpen={isOpen === 2}
          toggle={toggleOpen(2)}
        />
        <Question
          question="Question four"
          isOpen={isOpen === 3}
          toggle={toggleOpen(3)}
        />
        <Question
          question="Question five"
          isOpen={isOpen === 4}
          toggle={toggleOpen(4)}
        />
      </div>
    </div>
  );
}

问题

从传递的 Prop 中调用/使用 isOpen 和 toggle。

const Question = (props) => {
  return (
    <div className="question">
      <div>
        <button onClick={props.toggle}>
          {props.isOpen ? <FaMinus /> : <FaPlus />}
        </button>
      </div>
      <div onClick={props.toggle} className='title'>
        {props.question}
      </div>
      <Collapse isOpen={props.isOpen} className='content'>
        ....
      </Collapse>
      <hr />
    </div>
  );
};

更新

好的，因为您似乎正在努力解决在每个 Question 组件中呈现相同“内容”的问题，我建议您将所有问题和内容加载到一个数组中并映射它们，而不是对 JSX 进行硬编码。

常见问题

const faqData = [
  {
    question: "Question one",
    content: <div> .... I'm content .... </div>, // <-- anything renderable as a child
  },
  ... etc...
];

function FAQ() {
  const [isOpen, setIsOpen] = useState(null);

  const toggleOpen = id => () => setIsOpen(
    isOpen => isOpen === id ? null : id,
  );

  return (
    <div className="faq" id='faq'>
      <h2>F.A.Q.</h2>
      <div className="faq-section">
        {faqData.map(({ content, question}, index) => (
          <Question
            key={index}
            content={content}
            question={question}
            isOpen={isOpen === index}
            toggle={toggleOpen(index)}
          />
        ))}
      </div>
    </div>
  );
}

问题

const Question = ({ content, question, isOpen, toggle }) => {
  return (
    <div className="question">
      <div>
        <button onClick={toggle}>
          {isOpen ? <FaMinus /> : <FaPlus />}
        </button>
      </div>
      <div onClick={toggle} className='title'>
        {question}
      </div>
      <Collapse isOpen={isOpen} className='content'>
        {content}
      </Collapse>
      <hr />
    </div>
  );
};

为了防止您错过它，您还需要在项目中的某处导入 Bootstrap CSS，以使 Bootstrap 样式、过渡和动画正常工作。

import "bootstrap/dist/css/bootstrap.min.css";