javascript - 为什么“此”关键字指代传递的参数？

我在下面附加了一个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} />
        }
    }
}

最佳答案

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。

希望对您足够清楚。