Question

我正在我的React应用程序中实现React-accessible-accordion。单击功能运行良好，但是，我看不到手风琴上出现箭头图标。我尝试将其与npm示例中显示的DOM结构进行比较，我发现图标本身的div并未添加到我的DOM中。

我的代码-

从'react'导入React；从“ react-dom”导入ReactDOM；

导入{ 手风琴，手风琴项目 AccordionItemTitle， AccordionItemBody， }来自“ react-accessible-accordion”；

导入“ react-accessible-accordion / dist / fancy-example.css”；导入'react-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]')

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

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>

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

4 个答案: