1

我正在使用带有 react 和 typescript 的 mobx-state-tree 库。

商店.ts：

import { types } from 'mobx-state-tree'

export const UserModel = types
  .model('UserModel', {
    name: types.maybe(types.string)
  });

const RootStore = types
  .model('RootStore', {
    user: types.optional(types.maybe(UserModel), null)
  });

export default RootStore

App.jsx 无状态组件：

const App = ({ rootStore }: {rootStore: typeof RootStore.Type}) =>
  <Wrapper>
    Content
  </Wrapper>;

export default inject('rootStore')(observer(App))

当我尝试将 App 组件添加到根组件中时，出现打字稿编译器错误

类型“{}”不可分配给类型“IntrinsicAttributes & { rootStore: { user: { name: any; } & IStateTreeNode; } & IStateTreeNode; }'。

const rootStore = RootStore.create();

render(
  <AppContainer>
    <Provider rootStore={rootStore}>
      <App/> // <- the error was thrown out here
    </Provider>
  </AppContainer>,
  document.getElementById('root')
);

由 Provider mobx 组件注入的 RootStore，该组件使用 React 上下文机制将 rootStore 注入到子组件中。但看起来打字稿编译器不知道这种机制并抛出错误，因为 rootStore 必须由根组件显式提供。

我应该添加什么来显示 rootStore 将由 mobx 提供者提供的打字稿？

4

0 回答 0