为什么 Bootstrap 手风琴在 React 中不起作用？

Question

我已经使用 React 和 React-bootstrap 启动了一个新应用程序。 App.js 文件之外只有一个组件。内容：

import React from 'react';
import { Accordion, Button, Card } from 'react-bootstrap';

const accordionDemo = (props) => (
  <Accordion defaultActiveKey="0">
    <Card>
      <Card.Header>
        <Accordion.Toggle as={Button} variant="link" eventKey="0">
          Card one
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="0">
        <Card.Body>Body of Card One.</Card.Body>
      </Accordion.Collapse>
    </Card>
    <Card>
      <Card.Header>
        <Accordion.Toggle as={Button} variant="link" eventKey="1">
          Card two
        </Accordion.Toggle>
      </Card.Header>
      <Accordion.Collapse eventKey="1">
        <Card.Body>Body of Card Two.</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>
  );
  
  export default accordionDemo;

这会导致代码中的每张卡片显示一个按钮和文本。这些按钮除了在控制台中创建警告之外没有任何作用：

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode.

1. 警告应该被打破，对吧？
2. 这是一个反应引导广泛的问题吗？或者也许是 Boottstrap？
3. 我需要手动导入一些CSS吗？我认为反应组件已经带有这种样式了。

Answer 1

所以我很愚蠢。我没有将 bootstrap scss 导入到我的主 scss 文件中。而且......这就是一切。

因此，答案是肯定的，在使用react-bootstrap时，您确实需要单独导入CSS——按照https://react-bootstrap.github.io/docs/getting-started/introduction