Почему ключевое слово "this" относится к переданному аргументу?

Question

Я прилагаю код реакции ниже, но мой вопрос касается базового 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

это Ключевое слово имеет следующее использование:

• Это ключевое слово используется для получения текущего контекста события, в котором мы находимся. запуск.
  • Он также имеет некоторые различия между строгим режимом и нестрогим режим.
  • Это не может быть установлено присваиванием во время выполнения, и это может быть отличается каждый раз, когда вызывается функция.
  • При использовании отдельно относится к глобальному объекту.
  • Внутри функции значение этого параметра зависит от того, как называется.