使用子组件中从父组件接收的状态
使用子组件中从父组件接收的状态
提问于 2019-05-24 07:27:05
当我点击GeneralNav中的菜单时，我成功地在true或false之间切换。
此menuState再次通过HomePage成功传递给Overlay。
尽管我不能在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>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-24 11:16:59
你可以像这样使用三元运算：
即如果menuState为真，则显示showMenu，反之亦然
<EasyFlexCol className={menuState ? showHide.showMenu : showHide.hideMenu}>
</EasyFlexCol>下面是供您参考的工作示例：https://stackblitz.com/edit/react-wj49ol
Stack Overflow用户
发布于 2019-05-24 11:12:39
渲染时使用三元运算符。
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属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56284083
复制相关文章
相似问题
腾讯云开发者
