我不敢相信我在问一个明显的问题,但在控制台日志中仍然出现错误。
控制台表示无法在目录中找到该模块,但是我至少检查了10次错别字。无论如何,这是组件代码。
我想在根中渲染 Header
import React, { Component } from 'react' import Header from './src/components/header/header' import logo from './logo.svg' import './App.css' class App extends Component { render() { return ( <Header/> ); } } export default App;
这是Header组件
Header
import React, { Component } from 'react' import ReactDOM from 'react-dom' import navBar from './src/components/header/navBar' import './src/css/header.css' class Header extends Component { render() { return { <div> <div id="particles-js"></div> <navBar/> <Title/> </div> }; } } ReactDOM.render(<Header/>, document.getElementById('header'));
我至少检查了10次该模块是否在此位置./src/components/header/header(文件夹“ header”包含“ header.js”)。
./src/components/header/header
然而,React仍然抛出此错误:
编译失败
./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'
NPM测试 说的是同样的话。
我们通常使用的import方式基于相对路径。
import
.并且..类似于我们用于导航的方法,terminal例如cd ..离开目录并将mv ~/file .a file移至当前目录。
.
..
terminal
cd ..
mv ~/file .
file
my-app/ node_modules/ package.json src/ containers/card.js components/header.js App.js index.js
您的情况App.js是,在src/目录中,而header.js在中src/components。要import你做import Header from './components/header'。大致翻译成我的当前目录,找到包含头文件的components文件夹。
App.js
src/
header.js
src/components
import Header from './components/header'
现在,如果来自header.js,则需要来自的import东西card,则可以执行此操作。import Card from '../containers/card'。这意味着,移出当前目录,查找具有卡文件的文件夹名称容器。
card
import Card from '../containers/card'
至于import React, { Component } from 'react',这不符合启动./或../或/因此节点将开始寻找在该模块node_modules,直到以特定的顺序react被发现。要了解更多详细信息,请在此处阅读。
import React, { Component } from 'react'
./
../
/
node_modules
react