我正在尝试使用 React、Typescript 和 MobX 构建一个新项目。
出于某种原因,我无法让 MobX 工作。这是一段相对简单的代码,但它给了我这个错误。
未捕获的错误:MobX 注入器:商店“appState”不可用!确保它是由某些提供商提供的
这是我的代码:
AppState.ts
import {observable} from "mobx"
import {observer} from "mobx-react"
export class AppState {
@observable public greeting = "hello World"
}
索引.tsx
import * as React from "react"
import * as ReactDOM from "react-dom"
import { Provider } from "mobx-react"
import { Router, Route, Switch } from "react-router"
import { createBrowserHistory } from "history"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
"./containers/BookingStep/BookingStepContainer";
import { TestContainer } from "./containers/TestContainer";
import { AppState } from "./store/AppState";
const history = createBrowserHistory()
ReactDOM.render(
<Provider store={AppState}>
<Router history={history}>
<Switch>
<MuiThemeProvider>
<div>
<Route path="/test" component={TestContainer} />
</div>
</MuiThemeProvider>
</Switch>
</Router>
</Provider>,
document.getElementById("root"))
测试容器.tsx
import * as React from "react"
import { inject } from "mobx-react"
import { AppState } from "../store/AppState"
export interface ITestContainerProps {
appState?: AppState
}
@inject("appState")
export class TestContainer extends React.Component<ITestContainerProps, any> {
public render() {
const { children, appState } = this.props
return (
<div>
{appState.greeting}
</div>
)
}
}
谁能指出我缺少什么?