React 与 Router/withStyles 和 mobx 的观察者组合时呈现不正确

Question

我正在用mobx构建一个react应用程序。withRouter和withStyles的一切都很好，因为我需要访问存储，所以我在observer中将store作为包装器添加到组件中。但由于我已经完成了此操作，渲染在其子组件上停止了正常工作。我应该如何正确访问商店？

编辑：找到了一种在组件中使用@observer注入存储的方法简化代码：

@observer
class PersistentDrawerLeft extends Component {
constructor(props) {
super(props);
this.state = {
open: true,
}
}
toggle = () => {
this.setState({ open: !this.state.open })
}
routeTo = (path) => () => {
this.props.history.push(path)
}
onRoute = (route) => {
if (typeof window !== 'undefined') {
if (route === '/' && window.location.hash === '#/') return true; // home route
if (route !== '/' && window.location.hash !== '#/' && window.location.hash.indexOf(route.toLowerCase().replace('/', '')) !== -1) return true;
}
return false;
}
render() {
const { open } = this.state;
const { classes } = this.props;
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>

</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.toggle}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
<ListItem button onClick={this.routeTo(routes.TOKEN)}>
<ListItemIcon className={this.onRoute(routes.TOKEN) ? classes.active : classes.passive}><EmojiEmotionsIcon /></ListItemIcon>
<ListItemText className={this.onRoute(routes.TOKEN) ? classes.active : classes.passive} primary={"Token"} />
</ListItem>
</List>
</Drawer>
<main
className={clsx(classes.content, {
[classes.contentShift]: open,
})}
>
<div className={classes.drawerHeader} />
{this.props.children}
</main>
</div>
)}}

包装：

const Wrapped = withRouter(withStyles(styles)(PersistentDrawerLeft));
export default function Observer () {
const store = useStores()
return (<Wrapped store={store} />)
});

Answer 1

现在，您的Observer根本没有从observer装饰器中受益，因为observer只有在某些可观察的属性发生变化时才会重新发送，但存储本身是不可观察的，它可能永远不会改变。

你需要做的是用observer包裹PersistentDrawerLeft

const Wrapped = withRouter(withStyles(styles)(observer(PersistentDrawerLeft)));