<分区>
我正在构建一个 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>
);
}
Message 函数将呈现，但 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"
]
}
为什么会出现此错误？