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

23 浏览
0 Comments

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

我正在构建一个React应用程序，并尝试更新一些JavaScript函数以使用ES6解构箭头语法。\nIndex.js文件：\n

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function TestMe() {
  const name = "User";
  const message = "Welcome!";
  return (
      
      
  );
}
ReactDOM.render(, document.querySelector('#root'));
const Hello = ({ name }) => (
    Hello, {name}
);
function Message(props) {
  return (
      {props.message}
  );
}

\nMessage函数将被渲染，但Hello函数在浏览器中抛出以下错误（在成功构建后）：\n\"\"\"\n元素类型无效：预期为字符串（内置组件）或类/函数（复合组件），但实际为：未定义。您可能忘记从定义它的文件中导出组件，或者可能混淆了默认和命名导入。\n请检查TestMe的渲染方法。\"\"\"\n以下是我的package.json文件，以防万一：\n{\n \"name\": \"jsx-exercises\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"eslint\": \"^5.6.0\",\n \"react\": \"^16.7.0\",\n \"react-dom\": \"^16.7.0\",\n \"react-scripts\": \"2.1.2\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"browserslist\": [\n \">0.2%\",\n \"not dead\",\n \"not ie <= 11\",\n \"not op_mini all\"\n ]\n}\n\n为什么会出现这个错误？

0

2 答案

0 Comments

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

在开发React应用程序时，有时会遇到"React元素类型无效"的错误，特别是在传递props时使用ES6解构语法时。本文将为您介绍这个问题出现的原因以及解决方法。

首先，让我们看看下面的问题描述：

"can't see this const" ... what?

your function inside constant

根据这个描述，问题似乎是由于函数内部的常量导致的。而且，问题似乎与ES6解构语法有关。

那么，让我们来分析一下这个问题的原因。

原因：

问题的根本原因是常量的作用域问题。当我们将函数声明放在常量之前时，函数可以访问到常量。然而，当我们将函数声明放在常量之后时，函数将无法访问到常量。

解决方法：

要解决这个问题，我们需要将常量的声明放在函数之前。

让我们看一个示例来更好地理解这个问题：

const TestMe = ({ name }) => {
  return <div>Hello {name}</div>;
};
const Hello = () => {
  const props = { name: "John" };
  return <TestMe {...props} />;
};
export default Hello;

在上面的示例中，我们想要将props传递给组件。我们使用了ES6解构语法来传递props。但是，由于组件在常量声明之前，它无法访问到常量props。

为了解决这个问题，我们需要将组件的声明移到文件的顶部，以便它可以访问到常量props。

修复后的代码如下所示：

const Hello = () => {
  const props = { name: "John" };
  return <TestMe {...props} />;
};
const TestMe = ({ name }) => {
  return <div>Hello {name}</div>;
};
export default Hello;

现在，组件可以访问到常量props，问题得到了解决。

当我们在React应用程序中遇到"React元素类型无效"的错误时，特别是在传递props时使用ES6解构语法时，可能是由于常量的作用域问题导致的。为了解决这个问题，我们只需将React组件的声明放在常量声明之前即可。

希望本文能够帮助您解决React元素类型无效的问题，并更好地理解ES6解构语法在React中的使用。

0
0 Comments

React元素类型无效 - 在传递props时ES6解构语法错误的原因是在访问Hello之前它没有被初始化。

在JavaScript中，声明会被"提升"，这意味着它们可以在整个作用域中访问，即使在声明之前。如果使用函数声明，初始化也会在作用域开始时发生：

{ // 作用域开始
   a();
   function a() { }
} // 作用域结束

现在变量只有在初始化后才能访问：

setTimeout(() => console.log(a)); // 1
console.log(a); // undefined
var a = 1;

在你的情况下，你在初始化之前访问了Hello。

有趣的是，访问使用let或const声明的变量在初始化之前会抛出SyntaxError（有很好的理由，q.e.d.），所以可以看到你的构建流程将const替换为var来支持旧版本的浏览器。

还有很棒的提示！谢谢！

很高兴能帮到你 🙂

0