javascript - reactstrap Collapse does not have any formating, and neither does card
问题描述
Reactstraps cards and collapse does not seem to work. I don't know what I am doing wrong but I have tried a few different methods to no avail. The text just sits there and the button does nothing.
I have tried reactstrap, react bootstrap and the normal html code. I am using rekit ide to work on this project.
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;
I should get a collapsing card when I push the button, but I get nothing.
解决方案
Did you install bootstrap
npm install --save bootstrap
and import it in src/index.js
file following Installation Guide like below:
import 'bootstrap/dist/css/bootstrap.min.css';
推荐阅读
- sql - 堆叠语法
- python - 使用数据流清理 CSV 文件中的数据
- php - 如何在php中使用私钥生成签名
- django - 图片未根据登录用户过滤
- sql - 如何创建具有读取、写入、删除和查看数据库中所有对象的完全权限的 sql 用户角色?
- python-2.7 - 如何将所有数据和 py 文件添加到 pyinstaller
- amazon-web-services - 网络负载均衡器的 AWS EC2 安全组权限
- firebase - 当应用程序在后台接收通知时,FirebaseMessaging.configure 不会运行
- c# - KeyDown 事件在 Windows 应用程序中不起作用
- java - 如何修复警告:在 Eclipse 中通过 org.testng.xml.XMLParser 进行非法反射访问?