Question

我是新来的人。我正在使用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这样的不同库的选择。有没有更好的方法来实现我想要的？谢谢。

Answer 1

我知道了，这是一个愚蠢的错误。我不得不在useAccordianToggle导入语句周围使用{}，如下所示。

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

TypeError：Object（...）不是useAccordianToggle中的函数错误

1 个答案: