react-bootstrap的Accordion报'Property 'Item' does not exist on type 'typeof Accordion''错误如何解决

该报错是因为你使用的Accordion语法和本地安装的react-bootstrap版本不匹配：<Accordion.Item>、<Accordion.Header>这类复合组件写法是react-bootstrap v2.0及以上版本才支持的API，如果你本地安装的是v1.x版本的react-bootstrap，就会触发这个TypeScript类型错误。

你可以根据项目情况二选一：

• 方案1：升级react-bootstrap到2.x版本
  执行命令升级依赖：

  # npm
  npm install react-bootstrap@latest bootstrap@latest
  # yarn
  yarn add react-bootstrap@latest bootstrap@latest
  

  升级后确认项目入口文件引入的bootstrap样式是v5版本：

  import 'bootstrap/dist/css/bootstrap.min.css'
  

  该方案无需修改你现在写的Accordion代码，升级完成后报错直接消失。

• 方案2：适配当前v1.x版本的API写法
  如果你不想升级依赖，可以把Accordion部分的代码替换为v1版本的语法即可：

  <Accordion defaultActiveKey="0">
    <Card>
      <Card.Header>
        <Accordion.Toggle as="button" variant="link" eventKey="0">
          Accordion Item #1
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="0">
        <Card.Body>2</Card.Body>
      </Accordion.Collapse>
    </Card>
    <Card>
      <Card.Header>
        <Accordion.Toggle as="button" variant="link" eventKey="1">
          Accordion Item #2
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="1">
        <Card.Body>2</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>
  

  注意需要额外从react-bootstrap中引入Accordion.Toggle、Accordion.Collapse组件。

内容的提问来源于stack exchange，提问作者Nish Dekardo