javascript - 为什么 "this"关键字引用传递的参数？

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

LoadingHOC 类中的

this 引用该类的实例。

考虑以下因素:

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。

希望您足够清楚。