HoC для контекстного потребителя, вызывающего ошибку типа с дочерним компонентом

Question

У меня возникла проблема, при которой я пытаюсь написать HoC, чтобы обернуть компоненты, которые должны иметь доступ к определенному контексту, через вновь введенные реквизиты.

Существует Gist , связанныйк учебнику, который в основном содержит следующий фрагмент:

export function withAppContext<
    P extends { appContext?: AppContextInterface },
    R = Omit<P, 'appContext'>
>(
    Component: React.ComponentClass<P> | React.StatelessComponent<P>
): React.SFC<R> {
    return function BoundComponent(props: R) {
        return (
            <AppContextConsumer>
                {value => <Component {...props} appContext={value} />}
            </AppContextConsumer>
        );
    };
}

Точно так же есть другой фрагмент здесь на SO , который выглядит следующим образом:

function withTheme<P extends ThemeAwareProps>(Component: React.ComponentType<P>) {
    return function ThemedComponent(props: Pick<P, Exclude<keyof P, keyof ThemeAwareProps>>) {
        return (
            <ThemeContext.Consumer>
                {(theme) => <Component {...props} theme={theme} />}
            </ThemeContext.Consumer>
        )
    }
}

Они довольнопочти то же самое и, по-видимому, сработало однажды, однако это уже не так.При использовании обоих вариантов дочерний компонент Component в подпорке рендеринга потребителя подчеркивается следующим сообщением об ошибке:

Type '{ exploreContext: IExploreContextStore; }' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
    Property 'exploreContext' does not exist on type 'IntrinsicAttributes & P & { children?: ReactNode; }'.

Мой пример кода, в котором возникает проблема, выглядит следующим образом:

type WithExploreContext = { exploreContext?: IExploreContextStore };

export function withExploreContext<P extends WithExploreContext>(ChildComponent: ComponentType<P>) {
    return function WrappedComponent(
        props: Pick<P, Exclude<keyof P, keyof WithExploreContext>>
    ) {
        return <Consumer>{(value) => <ChildComponent {...props} exploreContext={value} />}</Consumer>;
    };
}

Я почти не знаю, в чем проблема с этими фрагментами и почему они больше не работают, как ожидалось.

Answer 1

Распространение props только на дочерний компонент было недостаточно.Он начал работать сразу после приведения его к P с использованием {...props as P}.

Начиная с 3.2, поведение оператора распространения для дженериков изменилось .Видимо, тип props стирается как отрицательный побочный эффект, но вы можете обойти это, приведя его обратно к P, используя {...props as P} при распространении обратно в упакованный компонент.