找不到模块：无法解析'/home/sanika/Desktop/Coding/React/my-forms/src/Components'中的'@material-ui/lab/TabConte

Question

我是ReactJs的新手，我正试图使用react的材料UI库实现TabContext，我正在获得上面的错误。我认为这是由于路径。我试图再次安装材料UI，但没有帮助。我在分享我的代码。请检查

app/src/App.js

import logo from './logo.svg';
import './App.css';
import Navbar from './Components/Navbar';
import Form from './Components/Form';

function App() {
return (
<div className="App">
<h1>Hi</h1>
<Navbar></Navbar>
</div>
);
}
export default App;

app/src/组件/Navbar.js

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tab from '@material-ui/core/Tab';
import {TabContext} from '@material-ui/lab/TabContext';
import {TabList} from '@material-ui/lab/TabList';
import {TabPanel} from '@material-ui/lab/TabPanel';

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
function Navbar() {
const classes = useStyles();
const [value, setValue] = React.useState('1');
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<TabContext value={value}>
<AppBar position="static">
<TabList onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" value="1" />
<Tab label="Item Two" value="2" />
<Tab label="Item Three" value="3" />
</TabList>
</AppBar>
<TabPanel value="1">Item One</TabPanel>
<TabPanel value="2">Item Two</TabPanel>
<TabPanel value="3">Item Three</TabPanel>
</TabContext>
</div>
);
}
export default Navbar

package.json

{
"name": "my-forms",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"material-ui": "^0.20.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"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"
]
}
}

Answer 1

Inmy-app/src/Components/Navbar.js
试试这个:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tab from '@material-ui/core/Tab';
import TabContext from '@material-ui/lab/TabContext';
import TabList from '@material-ui/lab/TabList';
import TabPanel from '@material-ui/lab/TabPanel';

Answer 2

您还需要安装@material-ui/lab和@material-ui/core。

npm install @material-ui/lab
npm install @material-ui/core

然后使用这些导入:

import Tab from '@material-ui/core/Tab';
import TabContext from '@material-ui/lab/TabContext';
import TabList from '@material-ui/lab/TabList';
import TabPanel from '@material-ui/lab/TabPanel';

以上对@material-ui/core v4.12和@material-ui/lab v4.0进行了测试。

Answer 3

似乎你实际上试图从材料ui的lab方面导入一些组件，但从你的包我没有看到它安装在你的项目中。要使用lab组件，你需要安装一个单独的依赖项。

https://material-ui.com/components/about-the-lab/

所以基本上需要安装它。

npm install @material-ui/lab

Answer 4

您需要安装@mui/lab和@mui/material。

https://mui.com/material-ui/about-the-lab/安装

npm install @mui/lab @mui/material

纱:

yarn add @mui/lab @mui/material

Answer 5

如果您已经安装了@material-ui/lab，那么更改Navbar.js中的导入

import TabContext from '@material-ui/lab/TabContext';
// or
import { TabContext } from '@material-ui/lab';

裁判:https://material-ui.com/api/tab-context/

你正在做import {TabContext} from '@material-ui/lab/TabContext';，这是不正确的。TabList和TabPanel

也需要同样的修正。