react.js - react中使用import路径出错
本文介绍了react.js - react中使用import路径出错的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
练习react的大致目录结构如下
app/
components/
Message/
index.js
containers/
App/
index.js
app.js
index.html
config/
webpack.base.js
package.json
其中webpack的入口文件是app.js
。
组件Message的index.js
代码如下
import React from 'react';
function Message(props) {
return <div>Hello {props.name}</div>
}
export default Message;
容器App下的index.js
代码如下
import React from 'react';
import Message from '/components/Message';
class App extends React.Component {
render() {
return (
<div>
<Message name="React" />
</div>
);
}
}
export default App;
npm start
后,会出错,提示Cannot resolve 'file' or 'directory' /components/Message
按资料讲的是/
是绝对路径,其是相对于入口文件的相对路径。按理上面import应该是对的。然而报路径错误。于是将其修改为:
import Message from '../../components/Message';
打包过程正常,但在运行过程中浏览器会报上面import代码行错误Uncaught TypeError: Super expression must either be null or a function, not undefined
不是太明白。
解决方案
Cannot resolve 'file' or 'directory' /compoents/Message
报错信息写的是compoents
, 而你的真实路径是components
, 路径名写错了。
--------------------------------------
路经改成 '../../components/Message'
然后将你的message组件改一下,你现在return的是一个function,而不是一个react组件
import React, {Component} from 'react';
export default class Message extends Component {
render() {
return (
<div>Hello {props.name}</div>
)
}
};
这篇关于react.js - react中使用import路径出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文