切换图标未出现在React-Accessible-Accordion上

Question

我正在我的React应用程序中实现React-accessible-accordion。点击功能工作正常但是，我没有看到手风琴上出现箭头图标。我试图将它与npm中示例中显示的DOM结构进行比较，我看到图标本身的div没有添加到我的DOM中。

我的代码 -

从'react'导入React;从'react-dom'导入ReactDOM;

从'react-accessible-accordion'导入{Accordion，AccordionItem，AccordionItemTitle，AccordionItemBody，};

import'alfe-accessible-accordion / dist / fancy-example.css'; import'alaction-accessible-accordion / dist / minimal-example.css';

<div className="container">
                    <Accordion>
                    <AccordionItem>
                        <AccordionItemTitle>
                            <h4>Hello, This is me..</h4>
                        </AccordionItemTitle>
                        <AccordionItemBody>
                          Some Text
                        </AccordionItemBody>
                    </AccordionItem>
                </Accordion>
                </div>

箭头图标来自

<div class="accordion__arrow" role="presentation"></div>

这对我来说并没有增加。任何原因都是这种情况发生的。我正在使用npm网站上显示的确切演示代码。

链接我已经提到 -

https://www.npmjs.com/package/react-accessible-accordion

据我所知，我唯一没有补充的是，

document.querySelector('[data-mount]')

这是我的箭头图标没有加载的原因吗？我不确定这是不是一个开放的bug，但显示的例子在每个手风琴中都有这些图标。

Answer 1

在AccordionTitle下面添加，解决了问题 -

<h3 className="u-position-relative"> 
Accessible Accordion 
<div className="accordion__arrow" role="presentation"/> 
</h3>

Answer 2

你导入了CSS样式吗？

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';

Answer 3

你需要做几件事才能让它发挥作用：

1]你需要复制这个文件的所有内容.'react-accessible-accordion / dist / fancy-example.css';到另一个文件因为我们要覆盖一些类。

2]你需要在AccordionItemTitle中添加一个div

    <AccordionItemTitle>
        <h4>Hello, This is me..</h4>
        <div className="accordion__arrow" role="presentation" />
    </AccordionItemTitle>

3]在您创建的样式表中键入以下样式

.accordion__item {
    position: relative;
}
.accordion__arrow {
    display: inline-block;
    width: 24px;
    height: 12px;
    position: absolute;
    top: 40px;
    right: 15px;
    margin-top: -6px;
}

之后应该出现切换按钮。

Answer 4

添加这段代码

<AccordionItemTitle>       
    <h3 className="u-position-relative"> 
             Accessible Accordion
        <div className="accordion__arrow" role="presentation" />
    </h3>
</AccordionItemTitle>