TypeError: Object (...) не является ошибкой функции при использованииAccordianToggle

Question

Я новичок в реакции. Я использую response- bootstrap и пытаюсь создать аккордеон, содержащий более 20 карточек. В заголовке каждой карточки есть значок курсора, указывающий вправо / вниз. Я хочу переключить значок так, чтобы он указывал вниз или вправо в зависимости от того, свернуто ли тело карты или нет. Итак, я попытался реализовать пример с сайта response- bootstrap Custom Toggle с расширением 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. Есть ли лучший способ реализовать то, что я ищу? Спасибо.

Answer 1

Я понял это, и это была глупая ошибка. Мне пришлось использовать {} вокруг оператора импорта useAccordianToggle, как показано ниже.

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