Мне нужно иметь обертку для компонента, HO C, чтобы улучшить компонент с помощью redux, connect. Одним из параметров будет путь loda sh, чтобы получить данные из состояния, другой будет улучшаемым компонентом.
У меня проблема с типами. Ниже код работает, но что-то не так с типами. Как вы видите, интерфейс Section
имеет поле someField
, которое имеет тип number
, но в компоненте DataSection
, которое будет улучшено, у меня есть то же поле, но тип string
. Я хотел бы получить сообщение об ошибке при использовании оболочки SectionDataWrapper
, как в Main.tsx
. Я знаю, что проблема где-то в SectionDataWrapper
(у меня там ComponentType<any>
, что неправильно, потому что я теряю часть набора текста, я знаю, но я не мог понять это)
Что у меня есть сейчас
(Types.ts)
export interface Section {
someField: number,
anotherField: string
}
interface FormData {
field1: {
section: Section
}
}
(Main.tsx)
const ConnectedDataSection = withSectionWrapper<Section>("field1.section", DataSection);
(SectionWrapper.tsx)
interface Data<T> {
data: T
}
export interface SectionWrapperProps<T> extends Data<T> {
}
export const withSectionWrapper = <T, >(key: string, component: ComponentType<any>) => {
const mapStateToProps = (state: StoreState): Data<T> => ({data: _.get(state.formReducer.form, key) as T});
return connect(mapStateToProps)(component)
};
( Section.tsx)
interface NeededData {
someField: string
}
class DataSection<T extends NeededData> extends Component<SectionWrapperProps<T>> {
public render = (): JSX.Element => {
return (
<Section title={"Section"}>
<TextField
data={this.props.data}
fieldKey={"someField"}
/>
</Section>)
}
}
export default DataSection;