我的代码中是否有任何错误导致我的折叠组件不起作用？

Question

我正在创建一个 reactjs 网络应用程序，我想在其中使用折叠功能。所以我安装了 reactstrap 依赖并从那里导入“Collapse”组件。但它在我的代码中不起作用。

import { Component } from "react";
import React from "react";
import { Collapse, Navbar } from "reactstrap";
class Main extends Component {
  constructor(props) {
  super(props);
  this.state = {
  open: false
  };
}
 show() {
 this.setState({
  open: !this.state.open
  });
 }
 render() {
    return (
  <>
    <button onClick={() => this.show()}>Show</button>
    <Collapse isOpen={this.state.open}>
      <Navbar>hello</Navbar>
    </Collapse>
  </>
 );
}
}
export default Main;

查看demo这里。

Answer 1

在您的 index.js 文件中添加 import 'bootstrap/dist/css/bootstrap.min.css';。