时间戳

首页 > 解决方案 > 在 mobx 商店反应中更新正文样式

javascript - 在 mobx 商店反应中更新正文样式

问题描述

我有一个模态组件（React），它通过 mobx 商店中的 open、close 方法观察变化。

打开时，我需要设置document.body.style.overflow = 'hidden'为保留模式滚动。最后，我从身体上清除了隐藏的样式。

@action open = () => {
    document.body.style.overflow = 'hidden'
}

@action close = () => {
    document.body.style.overflow = ''
}

有没有更好的方法来做到这一点autorun？

我不知道在哪里调用自动运行，在 Store 类之外或者里面有一个方法。我没有运气。

autorun(
  () => {
      document.body.style.overflow = this.isMaximized ? 'hidden' : ''
  },
  { name: 'bodyOverflowUpdate' }
)

供参考，this.isMaximized是一个计算值

@computed
  get isMaximized() {
    return this.modalState.isOpen && !this.modalState.isMinimized
}

标签： javascriptreactjsmobxmobx-react

解决方案

使用 mobx 反应似乎可以解决我的用例

setBodyOverflow = reaction(
    () => this.isMaximized,
    isMaximized => {
      document.body.style.overflow = isMaximized ? 'hidden' : ''
    },
    { name: 'setBodyOverflow' },
  )

推荐阅读