将活动的类添加到React可访问的手风琴中

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：简单地添加一个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>

以这种方式静态设置为活动状态可能不是您想要的，这是一个具有一些可切换活动状态的演示。