Question

我在下面附加了一个react代码，但是我的问题是关于基本JavaScript的。我正在创建一个更高阶的组件，并将先前创建的组件作为参数传递给另一个组件，而我真正无法理解的是为什么“ this”关键字引用WrappedComponent？它可以正常工作，但这就是问题，我不知道它是如何工作的。

如果您能解释下面的情况，将非常高兴：

import React from 'react';

const LoadingHOC = (WrappedComponent) => {
    return class LoadingHOC extends React.Component{
        render() {
            return this.props.userName === "" ? "Loading..." : <WrappedComponent {...this.props} />
        }
    }
}

Answer 1

this类中的

LoadingHOC引用该类的实例。

请考虑以下内容：

import React from 'react';

const LoadingHOC = (WrappedComponent) => {
    return class LoadingHOC extends React.Component{
        render() {
            return this.props.userName === "" ? "Loading..." : <WrappedComponent {...this.props} />
        }
    }
}

const DummyComponent = (props) => (<div>{props.username}</div>);

const EnhancedComponent = LoadingHOC(DummyComponent);

LoadingHOC(DummyComponent)调用您声明的LoadingHOC 函数，并返回您在函数内部描述的LoadingHOC 类。因此，请执行以下操作：

<EnhancedComponent username="john"/>

将导致使用LoadingHOC实例化username类，并将其传递给WrappedComponent自变量，在我们的示例中为DummyComponent。

希望对您足够清楚。

Answer 2

这个关键字具有以下用法：

此关键字用于获取我们正在发生的事件的当前上下文触发。
- 严格模式和非严格模式也有一些区别模式。
- 在执行期间无法通过赋值设置，它可能是每次调用该函数都不同。
- 单独使用时，指的是全局对象。
- 在函数内部，此值取决于函数的方式叫。

为什么“ this”关键字引用传递的参数？

2 个答案: