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.），因此您可以看到您的构建管道已替换{ {1}}和const支持较旧的浏览器。

Answer 2

您必须将Hello移动到文件顶部，因为TestMe无法看到此const。 javascript函数仍然可以看到，因为它是函数声明

React元素类型无效-传递props时ES6解构语法错误

2 个答案: