主页 / user-12326209

ollylove's questions

Martin Hope
ollylove
Asked: 2024-12-24 23:57:51 +0800 CST
  • 5

我刚开始学习 React，正在 Next.js 中构建一个网站，但我对基础知识还不是很了解。
我是一名网页设计师和 CSS 开发人员，我使用 jQuery 已有 10 年，主要用于在点击、悬停等情况下切换元素上的类。现在我想在 React 中做同样的事情，但它不像 jQuery 那样简单，我就是无法理解它，因为它对我来说有点太合乎逻辑了。
以下是一个例子：一次只打开一个手风琴面板：

$(".panel").on("click", function() {
  $(".panel").not($(this)).removeClass("open")
  $(this).toggleClass("open")
})
.accordion {
  max-width: 300px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

.panel {
  width: 100%;
  border: 1px solid black;
  cursor: pointer;
  margin-bottom: 10px;
}

.panel h6 {
  font-size: 14px;
  margin: 0;
  padding: 10px;
  background: wheat;
}

.panel p {
  font-size: 0;
  padding: 0 10px;
  margin: 0;
  transition: all 0.3s linear;
}

.panel.open p {
  font-size: 14px;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="accordion">
  <div class="panel">
    <h6>Panel One</h6>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="panel">
    <h6>Panel Two</h6>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="panel">
    <h6>Panel Three</h6>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

只需 3 行 JS，就大功告成了。现在我想在 React 中做同样的事情，但不知道如何做。我的尝试：

import { useState } from "react"

export default function Accordion() {
    const [isActive, setIsActive] = useState(false)
    let classNames = 'panel ' + (isActive ? 'active' : '')

    function handleClick() {
        setIsActive(!isActive)
    }
    
    return (
        <div className="accordion">
            <Panel className={classNames} onClick={handleClick}>
                <h6>Panel One</h6>
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </Panel>
            <Panel className={classNames} onClick={handleClick}>
                <h6>Panel Two</h6>
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </Panel>
            <Panel className={classNames} onClick={handleClick}>
                <h6>Panel Three</h6>
                <p>Lorem Ipsum Dolor Sit Amet</p>
            </Panel>
        </div>
    )
}

function Panel({ children, className, onClick }) {
    return (
        <div className={className} onClick={onClick}>
            {children}
        </div>
    )
}

但是它效果不太好，当我单击面板时，所有面板都会一起打开/关闭。
所有在线教程都使用.map()，但理想情况下我想避免使用它。
我知道在 React 中useState会触发重新渲染，但useRef()事实并非如此，所以我想我可以将它们结合起来，但话又说回来，这不是我能做到的panel.current.toggleClass('open')，所以我不知道。TLDR

：有人能帮助我理解 React 的基础知识吗，特别是如何在单击时“翻译”jQuery 函数$(element).not($(this)).removeClass(class); $(this).toggleClass(class)？

jquery