这个问题已经在这里有了答案:

说我有一个简单的React无状态组件,如下所示:

const myComponent = () => {
    const doStuff = () => {
        let number = 4;

        return doubleNumber(number);
    };

    const doubleNumber = number => {
        return number * 2;
    };

    return <div>Hello {doStuff()}</div>;
};

export default myComponent;

基于收到的错误和对“ const”工作原理的理解,我假定此组件将不会呈现,因为函数“ doubleNumber()”在初始化之前被函数“ doStuff()”使用。 但是,每当我使用此组件时,它都会按预期方式呈现-为什么它不会引发异常? 这是否意味着React组件中'const'变量的顺序可以是我们想要的?

#1楼 票数:0 已采纳

代码起作用的原因是因为doStuff的主体直到被调用才执行。 由于doubleNumber恰好是在调用doStuff之前定义的,所以一切都很好,但是由于依赖项反转,因此linter将代码正确地标识为易碎。

仅当您在调用doStuff时未初始化doubleNumber时,才会发生崩溃:

const doStuff = () => doubleNumber(4);
doStuff(); // ReferenceError: doubleNumber is not defined
const doubleNumber = number => number * 2;

在这里看起来很明显,但在更复杂的情况下可能不太清楚。

const vs let不应该影响linter的输出,因为尽管它们已被吊起,但是直到初始化它们才能被访问。

顺序可以是任何你喜欢的,假设一旦依赖条件的通话只发,但这并不使它成为一个很好的想法(这正是掉毛应该确定)。

#2楼 票数:0

您的情况在块作用域变量Typescript文档中进行了描述(导航至该部分的最后一位)。

它说 :

您仍然可以在声明之前捕获块范围的变量。 唯一的问题是在声明之前调用该函数是非法的。 如果针对ES2015,则现代运行时将引发错误; 但是,现在TypeScript是允许的,不会将其报告为错误。

给出的例子是

function foo() {
    // okay to capture 'a'
    return a;
}

// illegal call 'foo' before 'a' is declared
// runtimes should throw an error here
foo();

let a;

在您的情况下, doubleNumber被捕获在doStuff ,但是doubleNumberdoStuff之前声明,因此根据文档可以正常使用,就像文档示例中的变量a一样。

  ask by HJordan35 translate from so

未解决问题?本站智能推荐:

2回复

在React中将状态属性分配给常量

我目前正在阅读React JS教程,并且不断看到这种情况,其中在使用前将状态的某些属性分配给常量: 我在那里想念什么吗? 这种常量分配看起来像是一种商品,不会使JSX超载,但是我不确定。
1回复

React16.4允许从状态更改中调用getDerivedStateFromProps。如何应对?

所以16.4“修复了”getDerivedStateFromProps中的一个错误,现在它在道具更改和状态更改时被解雇了。 显然这是有意的,来自这篇文章: https : //github.com/facebook/react/issues/12898 。 但是对我来说,在州内保存以前的道具
2回复

setState在React中的传播传播

这个问题已经在这里有了答案: 调用setState()函数时会发生什么? 3个答案 我有一个具有以下结构的React应用程序: 组件A由B和C组成 如果我在组件B中调用setState ,是否还会通知组件A和C (这意味着它们还将重新呈现至少进入协调阶段)?
2回复

React16中的纤维对象和ReactElement之间有什么区别?

在这个链接上(作为很多人提到的,为了解React 16的架构),它被提及: 甚至React中的Elements都是普通的JS对象,它包含有关组件的信息,具有以下四个道具: 我现在想知道Component,Element,Instance和这个新的Fiber对象之间的明显区别。 此外,
1回复

如何在JavaScript中重用SASS变量

我将JavaScript文件中的颜色变量列表作为对象。 我基于scss文件创建了上面的对象文件,其中包含 50 种颜色的列表。 我使用与 scss 变量相同的名称所以,我可以在我的 React 组件中使用 scss 变量。 我进口这些颜色来jsx文件从color.js文件。 我想使用该颜色变量来提供
1回复

componentDidCatch()是否从绑定到组件的诺言或事件处理程序中捕获错误

在React 16上,假设我有一个类似 } 然后在构造函数中执行this.onClick = this.onClick.bind(this) 。 错误会在componentDidCatch()捕获吗?
1回复

当布尔值从false更改为true时,如何在反应16中显示不同的div?

我在React 16应用程序中有一个基本形式。 成功提交表单后,我将变量从false切换为true ,然后一旦切换了布尔值,便想显示不同的div。 这是我的变量声明和表单提交功能: 这是条件HTML: 表单提交成功,console.log显示变量formSubmitted已成功从false切换为tr
2回复

没有为立即调用的函数悬挂const变量

我正在使用新的ECMASCRIPT-6 const关键字。 我不了解该关键字的一种特殊行为。 可以说我有两个功能 第一种情况 和第二种情况 对于第一种情况 ,输出为(不知道为什么) ReferenceError:初始化前无法访问词法声明“ _t” 对于第二种情况 ,输