Как вы реализуете компонент высшего порядка в React?

Question

Я пытаюсь настроить HOC в React, чтобы можно было применить обнаружение выделения текста к любому компоненту ввода.Однако я, кажется, что-то упустил, когда пытался собрать это вместе.

Я следил за этой статьей здесь о том, как создать HOC:

https://levelup.gitconnected.com/understanding-react-higher-order-components-by-example-95e8c47c8006

Мой код (до того, как статья выглядела так):

import { func } from 'prop-types';
import React, { PureComponent } from 'react';
import { Input } from 'reactstrap';

class SelectableInput extends PureComponent {
    handleMouseUp = () => {
        const selection = window.getSelection();

        if (selection) {
            this.props.onSelectionChanged(selection.toString());
        }
    };

    render() {
        // eslint-disable-next-line
        const { onSelectionChanged, ...rest } = this.props;
        return <Input onMouseUp={this.handleMouseUp} {...rest} />;
    }
}

SelectableInput.propTypes = {
    onSelectionChanged: func
};

export default SelectableInput;

И я использовал его так:

    render() {
        return (
                <SelectableInput
                    type="textarea"
                    name="textarea-input"
                    value={'This is some txt'}
                    onSelectionChanged={onTextSelectionChanged}
                    id="textarea-input"
                    onChange={e => this.onPageDataChanged(e)}
                    dir="rtl"
                    rows="14"
                    placeholder="Placeholder..."
                />
        );
    }

После прочтения статьи я изменил приведенный выше код на:

const SelectableInput = WrappedInput => {
    class SelectableInputHOC extends PureComponent {
        handleMouseUp = () => {
            const selection = window.getSelection();

            if (selection) {
                this.props.onSelectionChanged(selection.toString());
            }
        };

        render() {
            // eslint-disable-next-line
            const { onSelectionChanged, ...rest } = this.props;
            return <WrappedInput onMouseUp={this.handleMouseUp} {...rest} />;
        }
    }

    SelectableInputHOC.propTypes = {
        onSelectionChanged: func
    };
};

export default SelectableInput;

Мой вопрос: как мне теперь использовать его в функции render ()?

Спасибо за ваш аванс за помощь.

Answer 1

SelectableInput - это функция, которая возвращает функцию, которая принимает компонент в качестве параметра и возвращает другой компонент. Вы можете использовать это так:

const ResultComponent = ({...props}) =>
    SelectableInput({...props})(YourParamComponent);

Затем визуализируйте ResultComponent, где вы хотите.

Здесь у вас есть пример использования HOC и передачи ему реквизита:

https://jsfiddle.net/58c7tmx2/

HTML:

<div id="root"></div>

JS

const YourParamComponent = ({ name }) => <div>Name: {name}</div>

const SelectableInput = ({...props}) =>
    WrappedInput => <WrappedInput {...props} />

const ResultComponent = ({...props}) =>
    SelectableInput({...props})(YourParamComponent);

const App = () => <ResultComponent name="textarea-input" />

ReactDOM.render(
    <App />,
    document.getElementById('root')
)