Question

我正在使用打字稿并做出反应。

我有一个具有某些功能和默认渲染器功能的Parent组件。我有20个具有重写功能且没有渲染的子组件。

我想使它起作用=>

父母：

class Field<T> extends React.Component<T> {
    state = { fieldMode : FieldMode.DISPLAY}

    fieldEditMode() {
        return (
            <div>
            </div>
        )
    }

    fieldDisplayMode() {
        return (
            <div>
            </div>
        )
    }

    render() {
        return (
            this.state.fieldMode === FieldMode.DISPLAY ? this.fieldDisplayMode() : this.fieldEditMode()
        )
    }
}

export default Field;

孩子：

export interface UserFieldProps extends FieldProps {
    fieldId: string;
    field: ItemDetailsField;
    value: any;
}

class UserField extends Field<UserFieldProps> {
    fieldEditMode() {
        return (
            <div>
                EDITING : 
                UserField : {this.props.value}
            </div>
        )
    }

    fieldDisplayMode() {
        return (
            <div>
                DISPLAYING : 
                UserField : {this.props.value}
            </div>
        )
    }

    render() {
        return super.render(); 
    }
}

如果我export default Field就能达到我想要的目的，那么不用Props就能很好地工作。

但是，我想在我的场地和我的孩子的展位上添加道具

    const mapStateToProps = (state: RootState) => ({
    })

    const mapDispatchToProps = {
    }

    export default connect(
        mapStateToProps,
        mapDispatchToProps
    )(Field as new(props: Field<T>) => Field<T>);

问题

由于孩子的道具可能会改变，因此我需要这样声明孩子： class UserField extends Field<UserFieldProps> {

但是，如果这样做，我需要有一个通用的Field<T>

所以我尝试了以下

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Field as new(props: Field<T>) => Field<T>);

找不到名称“ T”

或

export default function FieldContainer<T>() {
    return connect(
        mapStateToProps, mapDispatchToProps
    )(Field as new(props: ComponentProps<T>) => Field<T>);
}

'new（props：any）=>字段类型的参数不能分配给'ComponentType>'类型的参数

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Field);

其他子组件将无法使用

没有基本构造函数具有指定数量的类型实参。

有没有办法实现这一目标？

通用类型的React-redux连接

0 个答案: