错误 uncaught referenceerror is not defined 已经解决_嗯嗯嗯吧

网络 02-07 3226

React项目场景：

解决前： package.json

"dependencies": { "@babel/runtime": "^7.13.7", "@types/webpack": "^4.41.26", "del": "4", "jquery": "^3.5.1", "react": "^17.0.1", "react-dom": "^17.0.1" }, "devDependencies": { "@babel/cli": "^7.13.0", "@babel/core": "^7.13.1", "@babel/plugin-proposal-object-rest-spread": "^7.13.0", "@babel/plugin-transform-runtime": "^7.13.7", "@babel/preset-env": "^7.13.5", "@babel/preset-react": "^7.12.13", "babel-loader": "^8.2.2", "babel-plugin-transform-runtime": "^6.23.0", ····

main.js

import React from 'react' //首字母必须大写 import ReactDom from 'react-dom' //首字母必须大写 import Home from './components/Home.js' var person1 = { name:'zs', age:20, gender:'男', address:'北京' } var person2 = { name:'ls', age:23, gender:'男', address:'武汉' } ReactDom.render(<Home {...person2}></Home>,document.getElementById('app'))

Home.js

import React from 'react'; function Home(props) { return <div className={props.name}> <h1 className={props.age}>这是Home组件中的H1标签--{props.name}</h1> </div> }; export default Home; 问题描述及解决方法：

报错 uncaught referenceerror: Home is not defined 指引用出错，这里是引用语法出错，解决方法见下面main.js，import {Home} from’./components/Home.js’

也有其它问题造成，如： a.出现这个错误，最可能的是引用的各个js的调用顺序有误，重新调整其引用顺序看看能否解决？ b.还有一个原因就是在引用js时，路径出错，不是项目中正确的文件路径。 c.还有一个原因是js中有某些值是不存在的。

解决后：

package.json

main.js

import React from 'react' //首字母必须大写 import ReactDom from 'react-dom' //首字母必须大写 import {Home} from'./components/Home.js' //*Home修改为{Home} var person1 = { name:'zs', age:20, gender:'男', address:'北京' } var person2 = { name:'ls', age:23, gender:'男', address:'武汉' } ReactDom.render(<Home {...person2}></Home>,document.getElementById('app'))

Home.js

import React from 'react'; export function Home(props) { return <div className={props.name}> <h1 className={props.age}>这是Home组件中的H1标签--{props.name}</h1> </div> }; 总结

1.export命令对外接口是有名称时，import命令引入时，从模块导入的变量名与被导入模块对外接口的名称需要相同，需要使用花括号，如上纠正； 2.而export default命令对外输出的变量名时，import命令引入时，不使用花括号。 3.如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名，如：import Home as XX from “XXX/XXX/XX.js”。 4.export default命令用于指定模块的默认输出：一个模块只能有一个默认输出，export default命令只能使用一次。export default命令生成的使用import命令后面不加大括号，导出是唯一对应。