SidenavStore.js - 定义Sidenav是否可见,默认为true:
const SidenavStore = types
.model('SidenavStore', {
isSidenavVisible: types.optional(types.boolean, true),
})
.actions(self => ({
hideSidenav: () => { self.isSidenavVisible = false; },
showSidenav: () => { self.isSidenavVisible = true; },
}));
export default SidenavStore;
ErrorPage使用SidenavStore来确定是否显示Sidenav。
import sidenavStore from '../../../stores/SidenavStore';
class ErrorPage extends React.Component {
componentDidMount() {
sidenavStore.hideSidenav();
}
componentWillUnmount() {
sidenavStore.showSidenav();
}
render() {
return (
<div>
<h1>My Content Here</h1>
</div>
);
}
}
在App.jsx
中,适用的代码:
const sidebarStore = SidebarStore.create();
const App = () => (
<BrowserRouter>
<Provider sidebarStore={SidebarStore}>
<Main>
{code here}
</Main>
</Provider>
</BrowserRouter>
);
export default App;
所以我的问题是:
在浏览器中,我收到错误TypeError: _stores_SidenavStore__WEBPACK_IMPORTED_MODULE_8__.default.hideSidenav is not a function
。然而,你可以看到,在SidenavStore.js中存在hideSidenav和showSidenav。
我在引用或做错了什么?任何指导都将非常感谢。
您当前正在导入模型并尝试使用它。你想用Provider
从你的inject
获取实例并使用道具中的实例。
import { observer, inject } from "mobx-react";
class ErrorPage extends React.Component {
componentDidMount() {
this.props.sidenavStore.hideSidenav();
}
componentWillUnmount() {
this.props.sidenavStore.showSidenav();
}
render() {
return (
<div>
<h1>My Content Here</h1>
</div>
);
}
}
export default inject("sidebarStore")(observer(ErrorPage));