type元素类型无效-- ES6在传递道具时破坏语法错误。
type元素类型无效-- ES6在传递道具时破坏语法错误。
提问于 2018-12-29 14:24:06
我正在构建一个React应用程序，并试图更新一些JavaScript函数以使用ES6析构箭头语法。
Index.js文件：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function TestMe() {
const name = "User";
const message = "Welcome!";
return (
<div>
<Hello name={name} />
<Message message={message} />
</div>
);
}
ReactDOM.render(<TestMe/>, document.querySelector('#root'));
const Hello = ({ name }) => (
<span>Hello, {name}</span>
);
function Message(props) {
return (
<div className="message">
{props.message}
</div>
);
}消息函数将呈现，但Hello函数将在浏览器中抛出以下错误(在成功构建之后)：
“元素类型无效:期望字符串(用于内置组件)或类/函数(用于复合组件)，但得到:未定义。您可能忘记从定义在其中的文件导出组件，或者您可能混淆了默认导入和命名导入。
检查TestMe的呈现方法。""“
这是我的package.json，以防万一：
{
"name": "jsx-exercises",
"version": "0.1.0",
"private": true,
"dependencies": {
"eslint": "^5.6.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}我为什么要犯这个错误？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-29 14:56:28
Javascript中的声明“悬挂”，这意味着可以在整个范围内访问它们，甚至在声明声明之前。如果使用函数声明，则在范围启动时也会进行初始化：
{ // scope begins
a();
function a() { }
} // scope ends现在，只有在初始化变量之后才能访问它们：
setTimeout(() => console.log(a)); // 1
console.log(a); // undefined
var a = 1;在您的示例中，您在初始化Hello之前访问它。
有趣的事实:在初始化发生之前访问用let或const声明的变量会抛出一个SyntaxError (原因很好，是q.e.d.)，因此可以看到您的构建管道用var代替了const，以支持较旧的浏览器。
Stack Overflow用户
发布于 2018-12-29 14:37:59
您必须将Hello移动到文件的顶部，因为TestMe看不到这个const。函数javascript无论如何都可以看到，因为它是函数声明
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53970407
复制相关文章
相似问题
腾讯云开发者
