Question

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

Store.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：{用户：{名：任何; }＆安培; 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注入子组件。但看起来，typescript编译器不知道这种机制并抛出错误，因为rootStore必须由root组件显式提供。

我应该添加什么来显示由mobx提供商提供rootstore的打字稿？

使用Mobx注入存储与Typescript和React无状态组件

0 个答案: