Как расширить функциональный компонент React на хуках?

Question

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

class SimpleComponent extends Component {
    method1 = () => {
        console.log('Method 1');
    };

    method2 = () => {
        console.log('Method 2');
    };

    renderMessage2() {
        return (
            <div onClick={this.method2}>Message 2</div>
        );
    }

    render() {
        return (
            <div>
                <div onClick={this.method1}>Message 1</div>
                {this.renderMessage2()}
            </div>
        );
    }
}

class EnhancedComponent extends SimpleComponent {
    method1 = () => {
        console.log('Enhanced Method 1');
    };

    method2 = () => {
        console.log('Enhanced Method 2');
    };

    renderMessage2() {
        return (
            <div onClick={this.method2}>Enhanced Message 2</div>
        );
    }
}

Как мы можем добиться такого поведения с помощью функциональных компонентов и хуков?

Answer 1

Мне не нравится это на самом деле, но я думаю, что мы можем сделать что-то подобное:

function Message2({ method2Function }) {
    return (
        <div onClick={method2Function}>Message 2</div>
    );
}

function method1() {
    console.log('Method 1');
}

function method2() {
    console.log('Method 2');
}

function SimpleComponent({ Message2Component = Message2, method1Function = method1, method2Function = method2 }) {
    return (
        <div>
            <div onClick={method1Function}>Message 1</div>
            <Message2Component method2Function={method2Function} />
        </div>
    );
}

function EnhancedMessage2({ method2Function }) {
    return (
        <div onClick={method2Function}>Enhanced Message 2</div>
    );
}

function EnhancedComponent() {
    return (
        <SimpleComponent
            Message2Component={EnhancedMessage2}
            method1Function={() => { console.log('Enhanced Method 1'); }}
            method2Function={() => { console.log('Enhanced Method 2'); }}
        />
    );
}