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";
我正在尝试学习 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";