反应元素类型无效 - 传递道具时的ES6解构语法错误[重复]

Question

我正在构建一个 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"
  ]
}

为什么会出现这个错误？

Answer 1

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.），因此可以看到您的构建管道将 const 替换为 var支持旧版浏览器。

Answer 2

您必须将Hello 移到文件顶部，因为TestMe 看不到这个常量。函数 javascript 无论如何都可以看到，因为它是函数声明