我在使用React时遇到了问题，编译错误如下：
Failed to compile
./node_modules/reactstrap/dist/reactstrap.es.js Attempted import error: 'react-lifecycles-compat' does not contain a default export (imported as 'reactLifecyclesCompat').
我有以下依赖项
"dependencies": {
"bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-lifecycles-compat": "^3.0.4",
"react-scripts": "2.1.2",
"react-transition-group": "^2.5.2",
"reactstrap": "^7.0.0",
"uuid": "^3.3.2"
}
接下来我创建了一个AppNavbar组件，它只是一个简单的导航栏，位置在"src/components/"，以下是我的AppNavbar组件代码，在文件末尾进行导出。
import React, { Component } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container
} from 'reactstrap';
class AppNavbar extends Component {
state = {
isOpen: false
}
toggle = () => {
this.setState({
isOpen: !this.state.isOpen
})
}
render() {
return (
<div>
<Navbar color="dark" dark expand="sm" className="mb-5">
<Container>
<NavbarBrand href="/">Shopping List!</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="https://about.me">About</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
</div>
);
}
}
export default AppNavbar;
然后将其显示在页面上，我像这样将AppNavbar导入到App.js中：
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<AppNavbar />
</div>
);
}
}
export default App;