首页 > 解决方案 > 如何使用正确的类型安全注入将 mobx-react 5 迁移到 6?

问题描述

现在我正在使用带有类组件项目的 TypeScript React,并且我正在逐渐迁移到反应钩子。

由于 mobx react 6 文件说Store injecting已经过时了。当项目使用 mobx-react 6 时,如何使用旧式注入(@inject)逐步迁移我的 React 类组件?

有一个迁移指南,示例如下代码。

import { MobXProviderContext } from 'mobx-react'
function inject(selector, baseComponent) {
    const component = ownProps => {
        const store = React.useContext(MobXProviderContext)
        return useObserver(() => baseComponent(selector({ store, ownProps })))
    }
    component.displayName = baseComponent.name
    return component
}

问题是这个函数的正确类型安全是什么。谢谢!

我已经尝试过了,但我现在无法baseComponent(selector({ store, ownProps })))正确计算类型。

const inject = <InProps, OutProps>(selector: (store: InProps) => OutProps) => {
    return <WrappedProps>(baseComponent: React.ComponentClass<WrappedProps> | React.FC<WrappedProps>) => {
        const component = (ownProps: WrappedProps) => {
            const store = React.useContext(storesContext)
            return useObserver(() => baseComponent(selector({ store, ownProps })))
        }
        component.displayName = baseComponent.name
        return component
    }
}

标签: reactjstypescriptmobx

解决方案


推荐阅读