将 active class 添加到 React Accessible Accordion

Question

我是新手。谁能告诉我如何将 'active' class 添加到手风琴项目。我正在使用 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 prop.

<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
}

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

将 active class 添加到 React Accessible Accordion

Add active class to React Accessible Accordion

accordion

reactjs