Как перевести `$(this).toggleClass()` из jQuery в React ⇐ Jquery

[Anonymous]

Я только начал изучать 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;
}

Код: Выделить всё

Panel One
Lorem ipsum dolor sit amet

Panel Two
Lorem ipsum dolor sit amet

Panel Three
Lorem ipsum dolor sit amet

Всего 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 (

Panel One
Lorem Ipsum Dolor Sit Amet


Panel Two
Lorem Ipsum Dolor Sit Amet


Panel Three
Lorem Ipsum Dolor Sit Amet


)
}

function Panel({ children, className, onClick }) {
return (

{children}

)
}

Но это работает не очень хорошо: когда я нажимаю на панель, все панели открываются/закрываются вместе.

Во всех онлайн-руководствах используется .map()< /code>, но в идеале я бы хотел этого избежать.

Я понимаю, что в React useState запускает повторный рендеринг, а useRef() - нет, поэтому я подумал, что смогу их совместить, но опять же, это не так что я могу сделать Panel.current.toggleClass('open'), поэтому не знаю.

TLDR: Может ли кто-нибудь помочь мне понять основы React, в частности, как «перевести» функцию jQuery при щелчке $(element).not($(this)).removeClass(class); $(this).toggleClass(класс)?

Подробнее здесь: https://stackoverflow.com/questions/793 ... y-to-react