我需要从数组数据中创建折叠菜单,但现在我点击任何菜单都会展开所有子菜单。
我认为问题出在我无法为主菜单设置唯一的“打开”状态。
我不希望分配“状态”,以支持将来可能有3个或4个附加数据的情况。
我使用React.js和material-ui。
请帮帮我,非常感谢。
const myData = [
{
id: '1',
nameHeader: 'Header1',
subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
},
{
id: '2',
nameHeader: 'Header2',
subMenu: [{ id: '1', name: 'subMenu1' }, { id: '2', name: 'subMenu2' }]
}
]
class Myclass extends Component {
state = { open: false }
handleClick = () => {
this.setState(state => ({ open: !state.open }))
}
render() {
const { open } = this.state
return (
<div style={{ marginRight: '15px' }}>
<List component="nav">
{myData.map(each => (
<React.Fragment key={each.id}>
<ListItem button onClick={this.handleClick}>
<ListItemText inset primary={each.nameHeader} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Divider />
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{each.subMenu.map(subData => (
<ListItem key={subData.id} button>
<ListItemText inset primary={subData.name} />
</ListItem>
))}
</List>
</Collapse>
</React.Fragment>
))}
</List>
</div>
)
}
}
export default Myclass