React 无法编译 reactLifecyclesCompat 错误

Question

我的反应有问题。它的编译错误说：

编译失败

./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;

Answer 1

不是代码中的错误，而是reactstrap 导入它需要的依赖项的方式。看看：https://github.com/reactstrap/reactstrap/issues/1343.