reactjs - 无法在 React.js 中解决“找不到模块:无法解析:”
问题描述
我不敢相信我在问一个明显的问题,但我仍然在控制台日志中收到错误。
控制台说它在目录中找不到模块,但我已经检查了至少 10 次拼写错误。无论如何,这是组件代码。
我想在根中渲染MainTemplate
import React from 'react';
import MainTemplate from './components/MainTemplate';
const App = () => {
return (
<MainTemplate></MainTemplate>
);
}
export default App;
这是MainTemplate组件
import React from 'react';
import Categories from './components/Categories';
const Maintemplate = () => {
const MainTemplate = {
display: 'flex',
};
const HeaderTemplate = {
backgroundColor: '#0bb286',
color: '#fff',
fontSize: '32px',
padding: '20px',
width: '100%',
};
const CrawlTemplate = {
backgroundColor: '#eeeeee',
width: '750px',
height: '1050px',
margin: '80px',
padding: '40px',
fontSize: '30px',
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between',
flex: '1',
marginTop: '60px',
};
const TutoringTemplate = {
backgroundColor: '#eeeeee',
width: '750px',
height: '1050px',
margin: '80px',
padding: '40px',
fontSize: '30px',
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: '1',
marginTop: '60px',
};
const GroupStudyTemplate = {
backgroundColor: '#eeeeee',
width: '750px',
height: '1050px',
margin: '80px',
padding: '40px',
fontSize: '30px',
textAlign: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: '1',
marginTop: '60px',
};
const footerTemplate = {
backgroundColor: '#0bb286',
color: '#fff',
fontSize: '32px',
textAlign : "center",
padding: '20px',
width: '100%',
}
return (
<div>
<div className="HeaderTemplate" style={HeaderTemplate}>
튜터링/학습공동체 및 비교과활동 모음 사이트
</div>
<div className="MainTemplate" style={MainTemplate}>
<div className="CrawlTemplate" style={CrawlTemplate}>
<Categories/>
</div>
<div className="TutoringTemplate" style={TutoringTemplate}>
튜터링 활동신청 part
</div>
<div className="GroupStudyTemplate" style={GroupStudyTemplate}>
학습공동체 활동신청 part
</div>
</div>
<div className="footerTemplate" style={footerTemplate}>
박종준 @copy & right
</div>
</div>
);
};
export default Maintemplate;
这是类别组件
import React from 'react';
import styled from 'styled-components';
const categories = [
{
name: 'All',
text: '전체'
},
{
name: 'Bachelor',
text: '학사'
},
{
name: 'Scholarship',
text: '장학'
},
{
name: 'Learning/Counseling',
text: '학습/상담'
},
{
name: 'Getjob',
text: '취창업'
}
];
const CategoriesBlock = styled.div`
display: "flex",
padding: "10px",
flexDirection : "row",
margin: "0 auto"
`;
const Category = styled.div`
fontSize : "16px",
cursor : "pointer",
textDecoration: 'none'
& : hover = {
color : #0bb286;
}
& + & {
margin-left : 10px;
}
`;
const Categories = () => {
return (
<CategoriesBlock>
{categories.map(c => (
<Category key={c.name}>{c.text}</Category>
))}
</CategoriesBlock>
);
}
export default Categories;
我已经检查了至少 10 次模块位于此位置 ./src/components/MainTemplate。
然而,React 仍然抛出这个错误:
./src/components/MainTemplate.js
Module not found: Can't resolve './components/Categories' in '/workspace/web_platform_test/myapp/src/components'
解决方案
如果您MainTemplate.js
位于./src/components/MainTemplate.js
,并且您Categories.js
位于./src/components/Categories.js
那么你的导入语句应该是:import Categories from './Categories';
推荐阅读
- python - 来自 Windows 客户端的 IPv6 服务器的 Paramiko ssh exec_command
- java - 如何修复java2smali中android studio的错误
- python - Selenium Python - 如果元素存在转到列表中的下一项
- android - 需要帮助弄清楚如何使用 api 密钥比较用户输入和从网站提取数据
- c# - How to fill Google form with C#
- java - 我的自定义异常没有返回异常代码(代码总是返回 500)
- php - How can I send scraped DATA to Mysql table with LARAVEL
- php - Get total hours with PHP & MySQL
- javascript - How to animate using loading-bar
- sql - 基于状态变化的分组