关闭反应手风琴组件中的活动元素

Question

我正在为我的 Next.js/react 应用中的产品页面构建一个简单的手风琴组件。我大部分时间都在使用它，但是当用户单击打开一个新的手风琴项目时，我需要关闭活动项目。这是我的组件的样子：

import React, { useRef, useState } from 'react';

import css from 'classnames';

import s from './ProductAccordion.module.scss';

interface FeatureProps {
  title: string;
  copy: string;
}

export const ProductAccordion = ({ content }: any) => {
  return (
    <div className={s.productAccordion}>
      {content.features.map((feature: FeatureProps) => {
        const [active, setActive] = useState(false);
        const activeClass = active ? 'active' : '';

        const toggleAccordion = () => {
          setActive(!active);
        };

        return (
          <div
            className={css(s.productAccordion__section, s[activeClass])}
            key={feature.title}
          >
            <button className={s.sectionTitle} onClick={toggleAccordion}>
              <p className={s.sectionTitle__title}>{feature.title}</p>
              <span className={s.button} />
            </button>

            <div className={css(s.sectionContent, s[activeClass])}>
              <div className={s.sectionContent__copy}>{feature.copy}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

如何在单击新项目时关闭活动的手风琴项目？谢谢！

Answer 1

我建议：

将您的 useState 挂钩提升一个级别
与其将“active”设为布尔值，不如将其设为一个字符串，您可以使用它来确定哪个项目应该处于活动状态
希望 feature 有一个唯一的标识符，比如 id 或可以用来识别的东西

你可以这样做：

export const ProductAccordion = ({ content }: any) => {
  const [active, setActive] = useState(''); // set up your useState here, so its value is available to all children elements

  return (
    <div className={s.productAccordion}>
      {content.features.map((feature: FeatureProps) => {

        const isActive = active === feature.id // feature.id here is just a stand in for some unique identifier that each feature has
     
        const activeClass = isActive ? 'active' : '';

        const toggleAccordion = () => {
          if (isActive) {
           setActive(''); // if the current item is active, and you toggle it, close the accordian
          } else {
           setActive(feature.id) // if the current item is not active, and you toggle it, open this section
          }
        };

        return (
          <div>
           {/* your code here */}
    </div>
  );
};

当然，您可以采用多种方法，而且我确信存在比这更优雅的方法。但这应该能让你朝着正确的方向前进！

关闭反应手风琴组件中的活动元素

Closing Active Element in React Accordion Component

javascript

reactjs

react-hooks

use-state