如何解决与Router / withStyles和mobx的观察者结合使用时,反应不正确的渲染
我正在用mobx构建一个React应用。 withRouter
和withStyles
一切正常,因为我需要访问商店,因此我在组件中添加了store
作为observer
中的包装。但是自从完成此操作后,渲染在其子组件上停止正常工作。我应该如何正确访问商店?
编辑:找到了一种使用@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} />)
});
解决方法
目前,您的Observer
根本无法从observer
装饰器中受益,因为observer
仅在某些可观察的属性更改时才会重新渲染,但是存储本身是不可观察的,并且可能永远不会改变。
您需要做的是将PersistentDrawerLeft
用observer
包裹
const Wrapped = withRouter(withStyles(styles)(observer(PersistentDrawerLeft)));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。