Question

我需要有一个组件HOC的包装，以通过redux增强组件的连接能力。其中一个参数是lodash路径，用于从状态获取数据，另一个则是要增强的组件。

我对类型有疑问。下面的代码有效，但是类型有问题。如您所见，接口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;

将通用HOC React组件与Typescript一起使用

0 个答案: