【发布时间】:2020-07-21 19:29:42
【问题描述】:
我认为问这个问题可能很愚蠢,但相信我,我是 React 的新手。实际上,我正在开发具有不同可折叠菜单的应用程序。例如,当我单击菜单时,下拉菜单显示当用户手动复制链接并放入浏览器时我想要实现的目标,然后我想显示特定的菜单。有人可以帮助我如何实现这一目标。
代码
menus.map((item, index) => (
<UnlockAccess
currentUser={userType || null}
roles={item.roles}
key={index}
>
<div key={index}>
<p
onClick={() => {
this.RouteTo(`/${item.url}`);
this.toggle(item.id);
}}
className={`element ${this.state[item.activeTab]}`}
>
<span
className={
collapse === item.id ? "fa fa-minus" : "fa fa-plus"
}
key={index}
></span>
<p className={this.state[item.activeTab]}>
{item.name}
</p>
</p>
{collapse === item.id ? (
<div className="prop-child">
<ul>
{item.children.map((item, index) => (
<li
key={index}
className={this.state[item.activeTab]}
onClick={() =>
this.setState({ collapse: item.itemId }, () =>
this.toggle(item.itemId)
)
}
>
<Link
onClick={() => this.RouteTo(`/${item.url}`)}
to={item.url}
className={this.state[item.activeTab]}
>
{item.name}
</Link>
</li>
))}
</ul>
</div>
) : null}
toggle = (id) => {
if (!this.state.collapse || id !== this.state.collapse) {
this.setState({
collapse: id,
});
}
};
【问题讨论】:
标签: javascript reactjs ecmascript-6 react-redux react-router