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

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时，我想使我的css overflow:hidden我想从body删除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';
  }
}