reactstrap Collapse 没有任何格式化，card 也没有

Question

Reactstraps 卡片和折叠似乎不起作用。我不知道我做错了什么，但我尝试了几种不同的方法都无济于事。文本就在那里，按钮什么也不做。

我已经尝试过 reactstrap、react bootstrap 和正常的 html 代码。我正在使用 rekit ide 来处理这个项目。

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = { collapse: false };
  }

  toggle() {
this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
return (
  <div>
    <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
    <Collapse isOpen={this.state.collapse}>
      <Card>
        <CardBody>
        Anim pariatur cliche reprehenderit,
         enim eiusmod high life accusamus terry richardson ad squid. Nihil
         anim keffiyeh helvetica, craft beer labore wes anderson cred
         nesciunt sapiente ea proident.
        </CardBody>
      </Card>
    </Collapse>
  </div>
    );
  }
}

export default Example;

按一下按钮我应该会得到一张折叠卡片，但我什么也没得到。

Answer 1

你安装了吗bootstrap

npm install --save bootstrap

并将其导入到 Installation Guide 之后的 src/index.js 文件中，如下所示：

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

reactstrap Collapse 没有任何格式化，card 也没有

reactstrap Collapse does not have any formating, and neither does card

javascript

node.js

reactjs

reactstrap