【发布时间】：2016-03-09 18:50:01
【问题描述】：
移动菜单 UI：（PanelGroup 与祖先和后代组件共享）
- 初始 MenuPanel 将 PanelGroup（在 props 中带有 navItems 数组）传递给 DOM。
- 传递的一些 navItems 有 subNavItems。
- 具有 subNavItems 的那些也将 PanelGroup 及其子项传递给 DOM。
预期会发生什么：
当触发 MenuPanel 时，会列出 navItems，并且具有 subNavItems 的那些具有标记供用户单击以显示 subNavItems。
当 subNavItems 被选中时，所有之前的 navItems 都将消失，只显示 subNavItems。
期望的结果：在家庭法 navItem 被点击后，链上的项目消失并且选定的子节点出现
实际结果：点击Family Law navItem后，链上的项目保留，选定的子节点写在它们上面
MobileNavButton：（上方的蓝色菜单按钮）
导出默认类 MobileNavButton 扩展组件 {
constructor(props) {
super(props);
this.state = {
showMobileMenuGroup: false
}
}
static propTypes = {
btn: PropTypes.object.isRequired,
viewDevice: PropTypes.object.isRequired
};
handleShowHide(e) {
e.preventDefault();
const doesShow = !this.state.showMobileMenuGroup;
this.setState({showMobileMenuGroup: doesShow});
}
render() {
const { btn, viewDevice } = this.props;
return (
<section>
.....
{ btn.clickEvent ?
<li ref="menuButton">
<a onClick={ this.handleShowHide.bind(this) }>
<icon className={ btn.icon }/>
<h2>{ btn.innerText }</h2>
</a>
<MobileMenuPanel childPages={ btn.childPages } showMobileMenuGroup={ this.state.showMobileMenuGroup } />
</li> : ''
}
</section>
);
}
}
菜单面板：
export default class MobileMenuPanel extends Component {
static propTypes = {
childPages: PropTypes.array.isRequired,
showMobileMenuGroup: PropTypes.bool.isRequired
};
render() {
const { showMobileMenuGroup } = this.props;
const { childPages } = this.props;
return (
<div className='imenupanel' style={showMobileMenuGroup ? showSlide : hideSlide } >
<MobileMenuGroup childPages={ childPages } showMobileMenuGroup={showMobileMenuGroup ? true : false } />
</div>
);
}
}
MobileMenuGroup：
export default class MobileMenuGroup extends Component {
static propTypes = {
childPages: PropTypes.array.isRequired,
showMobileMenuGroup: PropTypes.bool.isRequired
};
render() {
const { childPages } = this.props;
const { showMobileMenuGroup } = this.props;
return (
<div className='imenu' style={ showMobileMenuGroup ? { display: 'block' } : { display: 'none' } }>
{
childPages.map((childPage, idx) => {
return (
<MobileNavMenuItem key={ idx } menuItem={ childPage }/>
)
})
}
</div>
);
}
}
MobileNavMenuItem：
export default class MobileNavMenuItem extends Component {
constructor(props) {
super(props);
this.state = {
showMobileMenuGroup: false
}
}
static propTypes = {
menuItem: PropTypes.object.isRequired
};
showChildren(e) {
e.preventDefault();
let showMobileMenuGroup = !this.state.showMobileMenuGroup;
this.setState({ showMobileMenuGroup: showMobileMenuGroup });
}
render() {
const { menuItem } = this.props;
const childPages = menuItem.childPages !== undefined ? menuItem.childPages.length : 0;
let menuItemsStyle = childPages > 0 ? 'imenuitem iright' : 'imenuitem'
return (
<div className={ menuItemsStyle } pageId={ menuItem.pageId } childPages={ childPages }
>
{ childPages > 0 ?
<span onClick={ this.showChildren.bind(this) } >
<div style={ { color: '#FFFFFF', padding: '12px 15px' } }>{ menuItem.title }</div>
<MenuPanelGroup childPages={ menuItem.childPages } showMobileMenuGroup={ this.state.showMobileMenuGroup } />
</span>
:
<a href={ menuItem.linkTo }>{ menuItem.title }</a>
}
</div>
);
}
}
【问题讨论】：
标签： reactjs