在从父组件接收的子组件中使用状态

Question

当我点击 GeneralNav 中的菜单时，我成功地在 true 或 false 之间切换。

这个menuState再次通过HomePage成功传递给Overlay

尽管我无法在叠加层中切换右侧类以隐藏或显示菜单。有人可以向我解释在我的 EasyFlexCol 组件上添加类以显示或隐藏它的正确工作流程吗？卡了一段时间了。

谢谢！

class GeneralNav extends Component {

  render() {
    return (
        <div
          className="nav-burger-box menu-action"
          onClick={this.props.toggleMenu}
        >
          <div className="nav-burger-top" />
          <div className="nav-burger-bottom" />
        </div>
    );
  }
}



class HomePage extends Component {
  state = {
    showMenu: false
  };

  toggleMenu = e => {
    e.preventDefault();
    this.setState(state => ({ showMenu: !state.showMenu }));
  };

  render() {
    return (
      <React.Fragment>
          <OverlayMenu menuState={this.state.showMenu}/>
          <HeaderFullscreen />
      </React.Fragment>
    );
  }
}



class OverlayMenu extends Component {

  state = {
    showMenu: "overlay-menu-wrapper bg-color-dark overlay-menu-wrapper display-block",
    hideMenu: "overlay-menu-wrapper bg-color-dark overlay-menu-wrapper"
  };

  render() {
    let menuState = this.props.menuState
    console.log(menuState)
    return (
      <EasyFlexCol style={"here I want to add the right class to show or hide the overlay menu"}>

      </EasyFlexCol>
    );
  }
}

Answer 1

渲染时使用三元运算符。

class OverlayMenu extends Component {
    render() {
        const showHide= { // Assuming that strings below are valid CSS class names
            showMenu: "overlay-menu-wrapper bg-color-dark overlay-menu-wrapper display-block",
            hideMenu: "overlay-menu-wrapper bg-color-dark overlay-menu-wrapper"
        };

        let menuState = this.props.menuState
        console.log(menuState)
        return (
            <EasyFlexCol className={menuState ? showHide.showMenu : showHide.hideMenu}>
            </EasyFlexCol>
        );
    }
}

或者，您可以动态编写 <EasyFlexCol/> 组件的样式

class OverlayMenu extends Component {
    render() {
        style={ display: 'block' }
        let menuState = this.props.menuState
        return (
            <EasyFlexCol className={'some-default-class'} style={menuState ? style : {}}>
            </EasyFlexCol>
        );
    }
}

两个示例都假设 <EasyFlexCol/> 有 className 属性或 style 属性。

Answer 2

你可以像这样使用三元运算：

即如果 menuState 为真则显示 showMenu 否则反之亦然

            <EasyFlexCol className={menuState ? showHide.showMenu : showHide.hideMenu}>
            </EasyFlexCol>

这是供您参考的工作示例：https://stackblitz.com/edit/react-wj49ol

在从父组件接收的子组件中使用状态

Using state in child component received from parent component

javascript

state

reactjs

react-props