React 中容器未定义问题

Container is not defined problem in React

我正在尝试学习 React,但是这个 'Container' 没有定义,我不知道为什么会出现这个错误,尽管我在课程中做了所有事情

这里是App.js

import React from "react";
import { Row } from "reactstrap";
import CategroyList from "./CategroyList";
import Navi from "./Navi";
import ProductList from "./ProductList";

function App() {
  return (
    <div>
      <Container> //'Container' is not defined
        <Row>
          <Navi />
        </Row>
        <Row>
          <CategroyList />
          <ProductList />
        </Row>
      </Container>



    </div>
  );
}

export default App;

此处 json 代码,我下载了最新的 reacstrap 版本,并将 'bootstrap/dist/css/bootstrap.min.css' 导入到我的 index.js 文件中,但如您所见,我仍然会出错

  "name": "intro",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "reactstrap": "^9.0.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

您缺少第 2 行的 Container 导入:

import { Row, Container } from "reactstrap";