Написание компонента React более высокого порядка с помощью TypeScript

если вы спрашиваете, можно ли определить HOC, который может добавить новую опору, скажем, "thingy", к компоненту без изменения определения реквизита этого компонента, чтобы включить "thingy", я думаю, что это невозможно.

это потому, что в какой-то момент кода Вы получите:

render() {
    return (
        <WrappedComponent thingy={this.props.thingy} {...this.props}/>
    );
}

и это всегда будет вызывать ошибку, если WrappedComponent не входит thingy в его определении реквизита. Ребенок должен знать, что он получает. Без рук, я не могу. подумайте о причине передачи опоры компоненту, который все равно не знает об этом. Вы не сможете ссылаться на эту опору в дочернем компоненте без ошибки.

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

interface HocProps {
    // Contains the prop my HOC needs
    thingy: number;
}

const hoc = function<P extends HocProps>(
    WrappedComponent: new () => React.Component<P, any>
) {
    return class MyHOC extends React.Component<P, any> {
        render() {
            return (
                <WrappedComponent {...this.props}/>
            );
        }
    }
}
export default hoc;

// Example child class

// Need to make sure the Child class includes 'thingy' in its props definition or
// this will throw an error below where we assign `const Child = hoc(ChildClass)`
interface ChildClassProps {
    thingy: number;
}

class ChildClass extends React.Component<ChildClassProps, void> {
    render() {
        return (
            <h1>{this.props.thingy}</h1>
        );
    }
}

const Child = hoc(ChildClass);

теперь, конечно, этот пример HOC действительно не делает что-нибудь. Действительно, HOC должен быть выполнение какой-то логики, чтобы обеспечить значение для дочерней опоры. Например, возможно, у вас есть компонент, который отображает некоторые общие данные, которые обновляются повторно. У вас могут быть разные способы обновления и создания HOC, чтобы отделить эту логику.

у вас есть компонента:

interface ChildComponentProps {
    lastUpdated: number;
    data: any;
}

class ChildComponent extends React.Component<ChildComponentProps, void> {
    render() {
        return (
            <div>
                <h1>{this.props.lastUpdated}</h1>
                <p>{JSON.stringify(this.props.data)}</p>
            </div>
        );
    }
}

а затем пример HOC, который просто обновляет дочерний компонент на фиксированном интервале, используя setInterval может быть:

interface AutoUpdateProps {
    lastUpdated: number;
}

export function AutoUpdate<P extends AutoUpdateProps>(
    WrappedComponent: new () => React.Component<P, any>,
    updateInterval: number
) {
    return class extends React.Component<P, any> {
        autoUpdateIntervalId: number;
        lastUpdated: number;

        componentWillMount() {
            this.lastUpdated = 0;
            this.autoUpdateIntervalId = setInterval(() => {
                this.lastUpdated = performance.now();
                this.forceUpdate();
            }, updateInterval);
        }

        componentWillUnMount() {
            clearInterval(this.autoUpdateIntervalId);
        }

        render() {
            return (
                <WrappedComponent lastUpdated={this.lastUpdated} {...this.props}/>
            );
        }
    }
}

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

const Child = AutoUpdate(ChildComponent, 1000);