TypeError: Object(...) is not a function error in useAccordianToggle答案

【问题标题】：TypeError: Object(...) is not a function error in useAccordianToggleTypeError: Object(...) is not a function error in useAccordianToggle
【发布时间】：2020-07-11 19: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。有没有更好的方法来实现我正在寻找的东西？谢谢。

【问题讨论】：

标签： javascript reactjs react-bootstrap

【解决方案1】：

我想通了，这是一个愚蠢的错误。我必须在 useAccordianToggle 导入语句周围使用 {}，如下所示。

import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';

【讨论】：