如何正确向Mobx observer组件同时传递props与store？

你的问题出在组件的参数类型定义和实际传参方式不匹配：你定义组件时要求业务props必须放在props字段里，但实际使用时是直接平级传递属性，导致TypeScript报错。

下面是两种直接传递props的正确写法：

方案1：合并Store和业务Props的类型 #

把Store实例和业务属性合并到同一个Props接口里，传参时直接平级传递即可：

export interface Props {
    isFilterDrawerOpen: boolean
    myStore: MyStore
}

export const Dashboard = observer(({ myStore, isFilterDrawerOpen, children }: PropsWithChildren<Props>) => {
    // 直接使用myStore和isFilterDrawerOpen
    return <div>{children}</div>
});

使用组件时正常传参：

<Dashboard
    myStore={myStore}
    isFilterDrawerOpen={isFilterDrawerOpen}
>
    {/* 子组件内容 */}
</Dashboard>

方案2：使用Rest参数拆分Store和Props #

如果不想把Store放进业务Props接口，可以用Rest参数拆分Store和剩余的业务属性，类型上用交叉类型合并：

export interface Props {
    isFilterDrawerOpen: boolean
}

export const Dashboard = observer(({ myStore, ...props }: { myStore: MyStore } & PropsWithChildren<Props>) => {
    // 使用myStore和props.isFilterDrawerOpen
    return <div>{props.isFilterDrawerOpen && '抽屉已打开'}</div>
});

使用方式和之前一致：

<Dashboard
    myStore={myStore}
    isFilterDrawerOpen={isFilterDrawerOpen}
/>

这两种写法都能让你直接传递props属性，同时满足TypeScript的类型校验，不用手动封装props参数。

内容的提问来源于stack exchange，提问作者user2233706