TypeError: Object(...)不是useAccordianToggle中的函数错误
TypeError: Object(...)不是useAccordianToggle中的函数错误
提问于 2020-07-12 03:09:59
我是个新手。我正在使用react-bootstrap并尝试创建一个包含超过20张卡片的手风琴。每个卡头都有一个向右/向下的插入符号图标。我想根据卡体是否折叠来将图标切换为指向下或指向右。所以，我试着从react-bootstrap网站Custom Toggle with Expansion Awaremess实现这个例子，我得到了上面的错误
const decoratedOnClick = useAccordionToggle(
eventKey,
() => callback && callback(eventKey),
); 完整的代码如下。
import React, {useContext} from 'react';
import Accordion from 'react-bootstrap/Accordion';
import useAccordionToggle from 'react-bootstrap/AccordionToggle';
import AccordionContext from 'react-bootstrap/AccordionContext';
import Card from 'react-bootstrap/Card';
import 'bootstrap/dist/css/bootstrap.min.css';
function ContextAwareToggle({ children, eventKey, callback }) {
const currentEventKey = useContext(AccordionContext);
const decoratedOnClick = useAccordionToggle(
eventKey,
() => callback && callback(eventKey),
);
const isCurrentEventKey = currentEventKey === eventKey;
return (
<button
type="button"
style={{ backgroundColor: isCurrentEventKey ? 'pink' : 'lavender' }}
onClick={decoratedOnClick}
>
{children}
</button>
);
}
function App() {
return (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<ContextAwareToggle eventKey="0">Click me!</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<ContextAwareToggle eventKey="1">Click me!</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
}
export default App;我甚至尝试设置我自己的上下文，如下所示
import React from 'react';
export default React.createContext(null);但是我还是得到了同样的错误！
此外，我也遇到过使用css来实现这一点的例子，但我没有选择使用不同的库，比如fontawesome。有没有更好的方法来实现我想要的东西？谢谢。
回答 1
Stack Overflow用户
发布于 2020-07-12 04:49:16
我想通了，这是一个愚蠢的错误。我必须在useAccordianToggle导入语句中使用{}，如下所示。
import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62853460
复制相关文章
相似问题
腾讯云开发者
