Question

我有一个模态组件（React），可以通过mobx存储中的open，close方法观察变化。

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

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

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

是否有更好的方法来使用autorun？

我不知道在商店类外部或内部有方法的地方调用自动运行。我没有运气。

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

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

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

Answer 1

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

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

在Mobx存储反应中更新身体样式

1 个答案: