单击一个项目时隐藏其他项目而无需在反应手风琴中定义任何 class

Question

我实现了手风琴，但现在我想一次只显示一个特定的项目。我知道这个平台上有很多关于同一个问题的答案，但我找不到任何合适的解决方案。实际上，我不想在活动项目中添加任何 class，也不想在 CSS 中添加任何内容。使用纯 JavaScript，我该如何实现？这是我的代码：

   const PerFAQ = ({ ques, ans }) => {
    const [isShown, setIsShown] = useState(false)
    return (
        <>
            <li>
                <a onClick={() => setIsShown(!isShown)}>{ques}
                    {
                        !isShown ? <BsChevronDown /> : <BsChevronUp />
                    }
                </a>
                {
                    isShown && <ul>
                        <li>
                            {ans}
                        </li>
                    </ul>
                }
            </li>
        </>
    )
}

愿意在需要时分享更多代码。

Answer 1

您可以通过提升 isShown 状态来执行此操作。

例如：

const ListItem = ({visible, onExpand}) => {
   return(
      <div>
          <button onClick={onExpand}>Expand</button>
          {visible && <p>your content</p>}
      </div>
   );
}

const List = ({items}) => {
   const [visibleIdx, setVisibleIdx] = useState(-1);
   return (
       <div>
            <ListItem visible={visibleIdx == 0} onExpand={() => setVisibleIdx(0)} />
            <ListItem visible={visibleIdx == 1} onExpand={() => setVisibleIdx(1)} />
       </div>
   )
}

编辑：可能不清楚我的意思。 React 组件形成树状层次结构。每个项目有 children。组件的状态由组件本身存储。您可以将这些组件向下传递给它的 children，但不能向上传递给它的 parent。如果你需要从 parent 访问状态，唯一的解决方案是将其提升。这意味着您需要将状态移动到 parent 组件，并且该组件需要将状态传递给它的 children.

单击一个项目时隐藏其他项目而无需在反应手风琴中定义任何 class

Hide other item when one is clicked without define any class in react accordion

javascript

accordion

reactjs