Добавить активный класс в React Accessible Accordion

Question

Я новичок, чтобы реагировать. Может кто-нибудь сказать, пожалуйста, как я могу добавить «активный» класс к аккордеону Я использую React Accessible Accordion

Вот мой код,

Импорт части

import React, {Component} from 'react';
import {
    Accordion,
    AccordionItem,
    AccordionItemHeading,
    AccordionItemButton,
    AccordionItemPanel,
} from 'react-accessible-accordion';

Визуализация части

<Accordion>
    <AccordionItem>
        <AccordionItemHeading>
            <AccordionItemButton>
                <h3>Accordion Title 1</h3>
            </AccordionItemButton>
        </AccordionItemHeading>
        <AccordionItemPanel>
            <p>Description 1</p>
        </AccordionItemPanel>
    </AccordionItem>
    <AccordionItem>
        <AccordionItemHeading>
            <AccordionItemButton>
                <h3>Accordion Title 2</h3>
            </AccordionItemButton>
        </AccordionItemHeading>
        <AccordionItemPanel>
            <p>Description 2</p>
        </AccordionItemPanel>
    </AccordionItem>
</Accordion>

Answer 1

AccordionItem имя класса : просто, как добавление className проп.

<Accordion>
  <AccordionItem className="active">
    <AccordionItemHeading>
      <AccordionItemButton>
        <h3>Accordion Title 1</h3>
      </AccordionItemButton>
    </AccordionItemHeading>
    <AccordionItemPanel>
      <p>Description 1</p>
    </AccordionItemPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionItemHeading>
      <AccordionItemButton>
        <h3>Accordion Title 2</h3>
      </AccordionItemButton>
    </AccordionItemHeading>
    <AccordionItemPanel>
      <p>Description 2</p>
    </AccordionItemPanel>
  </AccordionItem>
</Accordion>

css

.active {
  // active rules
}

Статическая установка активна таким образом, вероятно, не ' Это то, что вам нужно, вот демонстрация с некоторым активным состоянием.