Использование Generi c HO C Реагирование компонентов с Typescript - PullRequest
0 голосов
/ 31 марта 2020

Мне нужно иметь обертку для компонента, 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...