Использование состояния в дочернем компоненте, полученном от родительского компонента

Question

Когда я нажимаю на меню в GeneralNav, я успешно переключаюсь между истиной или ложью.

Это menuState снова успешно передается в Overlay через 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

Вы можете использовать троичную операцию следующим образом:

т.е. если menuState имеет значение true, showMenu, в противном случае наоборот

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

вот рабочий пример для вашей ссылки: https://stackblitz.com/edit/react-wj49ol

Answer 2

Используйте троичный оператор при рендеринге.

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 свойство.