Я пытаюсь написать HOC для использования контекста React, который по умолчанию может использоваться только для реквизита рендеринга.
Он работает путем рендеринга WrappedComponent
в контексте Consumer и передает контекст как key
prop, который предоставляется во время использования HOC.
Компонент работает нормально, и типы результирующего компонента корректны, но в реализации есть ошибка типа, поскольку K
используется в качестве ключа, но в ключах машинописного текста должны быть литеральные типы. Есть ли способ обеспечить, чтобы универсальный тип был не только string
, но и строковым литералом?
import React from "react"
function getConsumer<C>(
Context: React.Context<C> | React.Consumer<C>,
): React.Consumer<C> {
return (Context as any).Consumer || Context
}
export const withContext = <C extends any, K extends string>(
Context: React.Context<C> | React.Consumer<C>,
key: K,
) => <P extends { [K /* Error here, K must be a literal type */]: C }>(WrappedComponent: React.ComponentType<P>) => {
type NewProps = Omit<P, K>
return class WithContext extends React.Component<NewProps> {
render() {
const Consumer = getConsumer(Context)
return (
<Consumer>
{context => (
<WrappedComponent
{...Object.assign({}, this.props, { [key || "context"]: context })}
/>
)}
</Consumer>
)
}
}
}