Реагируйте на компоненты высшего порядка: правильный способ добавления методов экземпляра

Question

Я пытаюсь добавить методы экземпляра в упакованный компонент. Я делаю это, расширяя прототип обернутого компонента:

const useAppContext = () => WrappedComponent => {
    WrappedComponent.prototype.$context = { abc: 'abc' };
    return class extends React.Component {
        render() {
            return <WrappedComponent {...this.props} />;
        }
    };
};

@useAppContext()
class NavigationLinkList extends Component {
    render() {
        console.log('this.$context', this.$context);
    };
};

Хотя это работает Я не уверен, есть ли более чистый способ сделать это, который является "обычным" способом реагирования. Я не мог найти что-нибудь в документах, и это похоже на взлом. Есть ли другие (более чистые) способы сделать это?

Answer 1

Более осторожный способ - не изменять прототип класса, а расширять его:

const useAppContext = () => WrappedComponent => {
    return class extends WrappedComponent {
        $context = { abc: 'abc' };
    };
};

На данный момент это просто декоратор, и он не является действительным компонентом высшего порядка, поскольку он не может работать сфункциональные компоненты.

Способ, который идиоматичен для React, состоит в использовании композиции, а не наследования.Распространенным способом расширения функциональности существующего компонента в компоненте более высокого порядка является предоставление необходимых функциональных возможностей через реквизиты, поскольку реквизиты являются основным способом связи между компонентами в React:

Это может быть:

const useAppContext = () => WrappedComponent => props => {
    return <WrappedComponent $context={{ abc: 'abc' }} {...props} />;
};

и

@useAppContext()
class NavigationLinkList extends Component {
    render() {
        console.log(this.props.$context);
        ...
    };
};

Answer 2

Компонент более высокого порядка обычно добавляет функции к объектам-оболочкам, а не к его прототипу.

Добавление методов к прототипу делает упакованный компонент связанным с декоратором (это означает, что он не будет работать, если он не оформлен).) и усложнит его тестирование.

Кроме того, упомянутое estus, оно не будет работать с компонентами функций.

Вы всегда можете переписать свой декоратор, чтобы вставить контекст в завернутые компоненты.как таковой:

const useAppContext = () => WrappedComponent => {
    WrappedComponent.prototype.$context = { abc: 'abc' };
    return class extends React.Component {
        render() {
            return <WrappedComponent {...this.props} context={{ adb: 'abc')} />;
        }
    };
};