时间戳

首页 > 解决方案 > 为什么“this”关键字指的是传递的参数？

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

问题描述

我在下面附上了一个反应代码，但我的问题是关于基本的 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} />
        }
    }
}

标签： javascriptreactjsecmascript-6

解决方案

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。

希望对你来说足够清楚。

推荐阅读