主页 / coding / 问题 / 79306002
Accepted
ollylove
Asked: 2024-12-24 23:57:51 +0800 CST

如何将 `$(this).toggleClass()` 从 jQuery 转换为 React

  • 772

我刚开始学习 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

1 个回答

  1. Best Answer

    由于此处您的要求是分别控制每个面板Panel，然后每次只能打开其中一个面板（根据您的示例），因此您的状态必须存储打开的面板，而不是布尔值。由于您不想使用map，并且为了避免更多重复，您应该考虑将移入classNames组件Panel。

    export default function Accordion() {
  const [activePanel, setActivePanel] = useState(null);

  const handleClick = (panelId) => {
    setActivePanel((prevActivePanel) => (
      prevActivePanel === panelId ? null : panelId
    ));
  };
 
  return (
    <div className="accordion">
      <Panel
        isActive={activePanel === 1}
        onClick={() => handleCLick(1)}
      >
        <h6>Panel One</h6>
        <p>Lorem Ipsum Dolor Sit Amet</p>
      </Panel>

      <Panel
        isActive={activePanel === 2}
        onClick={() => handleClick(2)}
      >
        <h6>Panel Two</h6>
        <p>Lorem Ipsum Dolor Sit Amet</p>
      </Panel>

       <Panel
         isActive={activePanel === 3}
         onClick={() => handleClick(3)}
       >
         <h6>Panel Three</h6>
         <p>Lorem Ipsum Dolor Sit Amet</p>
       </Panel>
    </div>
  );
}

    function Panel({ children, isActive, onClick }) {
  const classNames = 'panel ' + (isActive ? 'active' : '');

  return (
    <div className={className} onClick={onClick}>
      {children}
    </div>
  );
}
    • 0

相关问题