Reactjs 使用已设置样式的组件切换body类和React setState

我试图打开一个非画布菜单，然后应用

overflow-y:hidden以防止滚动”。考虑到React和
样式化组件
是如何与
状态
一起工作的，这一点非常困难

如何访问
正文
？我真的不想使用
文档
来获取/设置，因为这是SSR盖茨比网站，它会抛出错误。有没有一种本地方法可以用这个堆栈钻到那么高的位置

import React from 'react'
import styled from 'styled-components'

import NavMenu from '../NavMenu/navmenu.js'

// Styles, w/ styled-component syntax
const HeaderBG = styled.header`
  background-color: ${props => props.theme.purple};
  padding: 5px 25px;
`
const HeaderContainer = styled.section`
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: ${props => props.theme.xl};
`

const NavMenuButton = styled.div`
  cursor: pointer;
`

const NavMenuLine = styled.div`
  background: #fff;
  height: 2px;
  margin: 5px 0;
  transition-duration: .15s;
  transition-property: transform, opacity;
  transition-timing-function: ease-in-out;
  width: 25px;
`


// Header component
class Header extends React.Component {

  // Initial menu state is closed (false)
  constructor(props) {
    super(props)
    this.state = {
      menuStatus: false
    }
  }

  // Toggles menu open/close state
  menuToggle = () => {
    this.setState( prevState => ({
      menuStatus: !prevState.menuStatus
    }))
  }

  render() {
    return (  
      <div>
        <HeaderBG>
          <HeaderContainer>
            <NavMenuButton onClick={ this.menuToggle } menuState={ this.state.menuStatus }>
              <NavMenuLine></NavMenuLine>
              <NavMenuLine></NavMenuLine>
              <NavMenuLine></NavMenuLine>
            </NavMenuButton>
          </HeaderContainer>
        </HeaderBG>
      </div>
    )
  }
} 

从“React”导入React
从“样式化组件”导入样式化
从“../NavMenu/NavMenu.js”导入NavMenu
//样式，带样式化组件语法
const HeaderBG=styled.header`
背景色：${props=>props.theme.purple}；
填充：5px25px；
`
const HeaderContainer=styled.section`
对齐项目：居中；
显示器：flex；
证明内容：之间的空间；
保证金：0自动；
最大宽度：${props=>props.theme.xl}；
`
const NavMenuButton=styled.div`
光标：指针；
`
const NavMenuLine=styled.div`
背景：#fff；
高度：2倍；
保证金：5px0；
过渡持续时间：.15s；
过渡属性：变换、不透明度；
过渡定时功能：易进易出；
宽度：25px；
`
//标题组件
类头扩展了React.Component{
//初始菜单状态为关闭（假）
建造师（道具）{
超级（道具）
此.state={
梅努斯塔斯：错
}
}
//切换菜单打开/关闭状态
菜单切换=（）=>{
this.setState（prevState=>({
menuStatus:！prevState.menuStatus
}))
}
render（）{
报税表（
)
}
} 
如果您正在使用（或可以升级到）版本4，则可以使用新版本。很好的一点是，您可以在代码中的任何地方实例化它。
如果您正在使用（或可以升级到）版本4，您可以使用新版本。很好的一点是，您可以在代码中的任何地方实例化它。
事实上，您可以使用新的“”，我很快为您编写了一个示例

import React from 'react';
import PropTypes from 'prop-types';
import {createGlobalStyle} from 'styled-components';

const GlobalStyles = createGlobalStyle`
    overflow-y: ${({menuOpen}) =>
      menuOpen && hidden };
  }


export default class GlobalCss extends React.Component {
  state = {
    menuOpen: false
  };

  componentDidMount() {
    document.body.addEventListener('onToggleMenu', this.onMenuOpen, true);
  }

  componentWillUnmount() {
     document.body.removeEventListener('onToggleMenu', this.onMenuOpen, true);    
  }

  onMenuOpen = event => {
      this.setState({
        menuOpen: !this.state.menuOpen
      });
    }
  };

  render() {
    return <Styled.GlobalStyles menuOpen={this.state.menuOpen} />;
  }
}

从“React”导入React；
从“道具类型”导入道具类型；
从“样式化组件”导入{createGlobalStyle}；
const GlobalStyles=createGlobalStyle`
溢出-y:${（{menuOpen}）=>
菜单打开和隐藏}；
}
导出默认类GlobalCss扩展React.Component{
状态={
美诺朋：错
};
componentDidMount（）{
document.body.addEventListener（'ontoggremenu'，this.onMenuOpen，true）；
}
组件将卸载（）{
document.body.removeEventListener（'ontoggremenu'，this.onMenuOpen，true）；
}
onMenuOpen=事件=>{
这是我的国家({
menuOpen:！this.state.menuOpen
});
}
};
render（）{
返回；
}
}

将组件添加到顶级组件中，如下所示：

  <GlobalStyles />

事实上，您可以使用新的“”我很快为您准备了一个示例

import React from 'react';
import PropTypes from 'prop-types';
import {createGlobalStyle} from 'styled-components';

const GlobalStyles = createGlobalStyle`
    overflow-y: ${({menuOpen}) =>
      menuOpen && hidden };
  }


export default class GlobalCss extends React.Component {
  state = {
    menuOpen: false
  };

  componentDidMount() {
    document.body.addEventListener('onToggleMenu', this.onMenuOpen, true);
  }

  componentWillUnmount() {
     document.body.removeEventListener('onToggleMenu', this.onMenuOpen, true);    
  }

  onMenuOpen = event => {
      this.setState({
        menuOpen: !this.state.menuOpen
      });
    }
  };

  render() {
    return <Styled.GlobalStyles menuOpen={this.state.menuOpen} />;
  }
}

从“React”导入React；
从“道具类型”导入道具类型；
从“样式化组件”导入{createGlobalStyle}；
const GlobalStyles=createGlobalStyle`
溢出-y:${（{menuOpen}）=>
菜单打开和隐藏}；
}
导出默认类GlobalCss扩展React.Component{
状态={
美诺朋：错
};
componentDidMount（）{
document.body.addEventListener（'ontoggremenu'，this.onMenuOpen，true）；
}
组件将卸载（）{
document.body.removeEventListener（'ontoggremenu'，this.onMenuOpen，true）；
}
onMenuOpen=事件=>{
这是我的国家({
menuOpen:！this.state.menuOpen
});
}
};
render（）{
返回；
}
}

将组件添加到顶级组件中，如下所示：

  <GlobalStyles />


我可能误解了你的意思，但是在事件处理程序中访问
文档对SSR来说很好，因为该处理程序永远不会在服务器上运行。@Thole-我认为你是对的，这就是我处理这个问题的方式，但感觉不对。使用
document
是正确的方法吗？一些命令式逻辑通常很好。或者，您可以在最上面的组件中保留一段状态，用于翻转
overflow-y:hidden打开”和“关闭”内联样式。@Thole-没有考虑声明性路由，只是使用我的顶级组件。我会有点担心框架会在我身上注入一些东西，但这是一个非常好的主意。我可能会误解你，但是在事件处理程序中访问
文档
对于SSR来说是很好的，因为处理程序永远不会在服务器上运行。@Thole-我认为你是对的，这就是我处理这个问题的方式，但这感觉不对。使用
document
是正确的方法吗？一些命令式逻辑通常很好。或者，您可以在最上面的组件中保留一段状态，用于翻转
overflow-y:hidden打开”和“关闭”内联样式。@Thole-没有考虑声明性路由，只是使用我的顶级组件。我会有点担心框架会在我身上注入一些东西，但这是一个非常好的主意。我来看看。我想我在3.x上，但可能很容易升级。我会看看。我想我使用的是3.x，但可能很容易升级。