Как обернуть класс в компонент более высокого порядка?

Question

Мне было интересно, могу ли я обернуть компонент класса внутри hoc, у которого также есть класс.

import React, { Component } from "react";
import { View } from "react-native";
import { Toast } from "react-native-easy-toast";
const withToast = EnhancedComponent => {
    return class HOC extends Component {
        render() {
            return (
                <View>
                    <EnhancedComponent {...this.props} toast={(message, duration) => this.toast.show(message, duration)} />
                    <Toast
                        ref={toast => {
                            this.toast = toast;
                        }}
                    />
                </View>
            );
        }
    };
};
export default withToast;

Это то, что я использую, и теперь я передаю такой компонент класса:

import React, { Component } from "react";
import withToast from "../../hoc/withToast";
import Btn from "react-native-micro-animated-button";
class Login extends Component<Props> {
render() {
            return <Btn title="Login" onPress={() => this.props.toast("logged in")} />;
        }
    }
export default withToast(Login);

Когда я запускаю его, я получаю эту ошибку:

Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string 
(for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have 
mixed up default and named imports.
Check the render method of `HOC`

Возможно ли это как-нибудь?

Спасибо!

Answer 1

Догадаться. Я импортировал import { Toast } from "react-native-easy-toast"; вместо того import Toast from "react-native-easy-toast";