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

Question

我在我的 React application.The 中实现了 React-accessible-accordion application.The 点击功能工作正常，但是我没有看到手风琴上出现箭头图标。我试图将它与 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 网站上显示的确切演示代码。

Link我已经提到了-

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

据我所知，我唯一没有添加的是，

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

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

Answer 1

您是否导入了 CSS 样式？

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

Answer 2

在 AccordionTitle 中添加以下内容，解决问题-

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

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 上

Toggle icon not appearing on React-Accessible-Accordion

css

accordion

node.js

npm

reactjs