反应设置溢出覆盖失败

Question

为什么这段代码不会起作用？

componentWillReceiveProps(nextProps) {

        if (this.props.show !== nextProps.show) {
            document.body.style.overflowX = 'hidden';
            document.body.style.overflowY = 'hidden';
        }

        if(nextProps.show === false){
            document.body.style.overflowX = 'auto';
            document.body.style.overflowY = 'auto';
        }
    }

我试图在叠加层上隐藏滚动条

Answer 1

我不太确定你想要实现的目标。但是下面的代码会正确地改变基于nextProps.show值的溢出样式。

componentWillReceiveProps(nextProps) {
  if (this.props.show !== nextProps.show) {
      document.body.style.overflowX = nextProps.show ? 'hidden' : 'auto';
      document.body.style.overflowY = nextProps.show ? 'hidden' : 'auto';
  }
}