Question

我正在尝试打开画布菜单，然后在文档的其余部分应用overflow-y: hidden;以防止滚动。鉴于React和styled-components与state一起工作的方式，这很难做到。

我将如何访问body？我真的不想使用document来获取/设置，因为这是SSR Gatsby网站，并且会抛出错误。有没有一种本机方法可以用此堆栈将那么高的数据进行挖掘？

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>
    )
  }
}

Answer 1

如果您正在使用（或可以升级到）版本4，则可以使用新的createGlobalStyle helper。令人高兴的是，您可以在代码中的任何地方实例化它。

Answer 2

事实上，您可以使用新的'createGlobalStyle'，我很快为您提供了一个示例。

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} />;
  }
}

您将组件添加为

到顶级组件中

  <GlobalStyles />

使用样式组件和React setState切换主体类

2 个答案: