有条件地在反应中应用内联样式

Question

我在我的组件上制作了一些画布菜单以做出反应，现在它可以有条件地工作。所以我有一个状态：

constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    this.toggleMenu = this.toggleMenu.bind(this);
}

componentDidMount() {
    this.setState({isToggleOn: false});
}

toggleMenu() {
    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    }));
}

当我的 isToggleOn 状态为 true 并且当它为 false 时，我想将我的 body css overflow:hidden 从 中删除 overflow:hidden身体。怎样才能做到这一点？

Answer 1

您可以添加一个componentDidUpdate 生命周期挂钩，检查isToggleOn 的状态是否发生变化，如果发生则更新主体overflow 样式。

componentDidUpdate(prevProps, prevState) {
  if (this.state.isToggleOn !== prevState.isToggleOn) {
    document.body.style.overflow = this.state.isToggleOn ? 'hidden' : 'visible';
  }
}