0
아이콘이있는 사이드 메뉴를 만들었으며 각 아이콘을 클릭하면 메뉴가 해당 항목과 함께 슬라이드 아웃됩니다. 동일한 항목을 클릭하면 메뉴가 닫히지 만 다른 항목은 메뉴를 열어 두는 경우
const handleCloseWhenOpen = menuOpen ? { onClick: this.closeMenu } : null;
{...handleCloseWhenOpen}
퍼팅. icon1을 클릭하면 메뉴가 열리고 아이콘 데이터가 전환되는 대신 icon2가 열리고 메뉴가 닫히고 icon2에 대한 데이터가있는 메뉴가 다시 표시되게하려면 icon2를 다시 클릭해야합니다. 동일한 아이콘을 클릭하여 다시 열면 해당 메뉴가 닫히기를 원합니다.
도움이 될 것입니다.
export default class SidebarNav extends Component {
static propTypes = {
children: PropTypes.any,
};
constructor() {
super();
this.state = {
menuOpen: false,
sideBarItems: new List(),
isSelected: false,
};
}
openMenu = (value) => {
let menuData = [];
switch (value) {
case 'icon1':
menuData = Data.icon1Data;
break;
case 'icon2':
menuData = Data.icon2Data;
}
this.setState({
menuOpen: true,
sideBarItems: menuData,
selectedIcon: value,
});
}
closeMenu = (value) => {
this.setState({
menuOpen: false,
selectedIcon: value,
});
}
render() {
const {
menuOpen,
sideBarItems,
selectedIcon,
} = this.state;
const { children } = this.props;
const handleCloseWhenOpen = menuOpen ? { onClick: this.closeMenu } : null;
return (
<PageWrapper>
<SideNav
onClick={this.openMenu}
selectedIcon={selectedIcon}
/>
<PageContentWrapper>
<Sidebar.Pushable as={Segment}>
<PushMenu
visible={menuOpen}
sideBarItems={sideBarItems}
{...handleCloseWhenOpen}
/>
<Sidebar.Pusher {...handleCloseWhenOpen}>
{children}
</Sidebar.Pusher>
</Sidebar.Pushable>
</PageContentWrapper>
</PageWrapper>
);
}
}export default class SideNav extends Component {
static propTypes = {
onClick: PropTypes.func,
selectedIcon: PropTypes.any,
}
render() {
const {
onClick,
selectedIcon,
} = this.props;
return (
<SideBarDiv>
<IconList>
{
Data.icon1Data.map((item, itemIndex) => {
return (
<IconWrapper
key={itemIndex}
className={
selectedIcon === item.get('value')
? 'Icon-pressed-shadow'
: 'Icon-right-shadow'
}
onClick={() => onClick(item.get('value'))}
>
<ListItem>
<Icon name={item.get('name')} />
</ListItem>
</IconWrapper>
);
})
}
{
Data.icon2Data.map((item, itemIndex) => {
return (
<IconWrapper
key={itemIndex}
className={
selectedIcon === item.get('value')
? 'Icon-pressed-shadow'
: 'Icon-right-shadow'
}
onClick={() => onClick(item.get('value'))}
>
<ListItem>
<Icon name={item.get('name')} />
<NotificationLabel>3</NotificationLabel>
</ListItem>
</IconWrapper>
);
})
}
</IconList>
</SideBarDiv>
);
}
}export default class PushMenu extends Component {
constructor() {
super();
this.state = {
visible: false,
};
}
static propTypes = {
visible: PropTypes.bool,
sideBarItems: PropTypes.instanceOf(Immutable.List),
}
render() {
const {
sideBarItems,
visible,
} = this.props;
return (
<Sidebar
className='Push-menu'
animation='push'
width='thin'
visible={visible}
>
<div>
{
sideBarItems ? sideBarItems.map((menuTitle, menuTitleIndex) => {
return (
<div key={menuTitleIndex}>
<Header>{menuTitle.get('title')}</Header>
<Linebreak />
</div>
);
})
: <Header>Content</Header>
}
</div>
<List>
{
sideBarItems ? sideBarItems.map((menuItem, menuItemindex) => {
return (
<li key={menuItemindex}>
{
!!menuItem.get('childItems') &&
menuItem.get('childItems').map((childItem) => {
return (
<div key={childItem.get('name')}>
<ListItemHeader>{childItem.get('name')}</ListItemHeader>
<List>
{
childItem.get('nestedItems').map((nestedItem) => {
return (
<ListLink key={nestedItem.get('name')}>
<Link
activeStyle={{ fontWeight: 'bold' }}
to={nestedItem.get('route')}
>
<li>{nestedItem.get('name')}</li>
</Link>
</ListLink>
);
})
}
</List>
</div>
);
})
}
</li>
);
})
: null
}
</List>
</Sidebar>
);
}
}
"각 아이콘의 필드"란 무엇을 의미합니까? 소품처럼? – StuffedPoblano
그건 의미가 있습니다. 고맙습니다. 이것이 답입니다. 감사합니다. – StuffedPoblano
12 개의 아이콘/메뉴가 있기 때문에 엉망이 될 것이라고 생각한다면 ... 두 번째 옵션은 SideNav가 자체 상태를 추적하도록하는 것입니다. 그래서 SideNav 구성 요소에서 생성자를 올바르게 수행합니까? PushMenu 구성 요소를 포함하도록 원래 게시물을 편집했습니다. – StuffedPoblano