当点击侧边栏项目想要传递一些道具来检查隐藏或显示组件中的一些按钮时，核心 ui reactjs 中的侧边栏菜单

Question

我在我的 project.I 中使用 corui 管理模板、reactjs 和 redux，试图在我的项目中授予权限。

目前在我的数据库中，我定义了这些权限（检查我的图片） !(https://imgur.com/a/O2ZtakF)

这是我目前想解决的问题 !(https://imgur.com/KnRRuSD)

我的问题出在这个 coreui 侧边栏中，当我单击侧边栏元素时让我们说 "sub menu1" 然后在那个时候我想将从 DB 获得的权限作为道具传递给属于 [=33 的组件=] 元素即时点击然后在图像左侧的组件加载后，我想禁用或启用带有该道具的注册按钮。

由于我不知道如何操作 coreui 侧边栏，我该如何使用 coreui 侧边栏解决这个问题。

下面是我的代码，它在主要组件中显示侧边栏

render() {
    return (
      <div className="app">
        <AppHeader fixed>
          <Suspense fallback={this.loading()}>
            <DefaultHeader onLogout={(e) => this.signOut(e)} />
          </Suspense>
        </AppHeader>
        <div className="app-body">
          <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <Suspense>
              <AppSidebarNav
                navConfig={_navs}
                {...this.props}
                router={router}
              />
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer />
          </AppSidebar>
          <main className="main">
            <AppBreadcrumb appRoutes={routes} router={router} />
            <Container fluid>
              <Suspense fallback={this.loading()}>
                <Switch>
                  {routes.map((route, idx) => {
                    return route.component ? (
                      <Route
                        key={idx}
                        path={route.path}
                        exact={route.exact}
                        name={route.name}
                        render={(props) => <route.component {...props} />}
                      />
                    ) : (
                      <Redirect from="*" to="/dashboard" />
                    );
                  })}

                  <Redirect from="*" to="/dashboard" />
                </Switch>
              </Suspense>
            </Container>
          </main>
        </div>
      </div>
    );
  }
}

下面是边栏用来导航的 nav.js 文件。

export default {
  items: [
    {
      name: "Dashboard",
      url: "/dashboard",
      icon: "icon-speedometer"
    },

    // {
    //   title: true,
    //   name: "Theme"
    // },
    // {
    //   name: "Colors",
    //   url: "/theme/colors",
    //   icon: "icon-drop"
    // },
    // {
    //   name: "Typography",
    //   url: "/theme/typography",
    //   icon: "icon-pencil"
    // },
    {
      title: true,
      name: "Administrator"
    },
    {
      name: "Customers",
      url: "/customers",
      icon: "cui-user",
      children: [
        {
          name: "Users Overview",
          url: "/customers/user_overview",
          icon: "cui-people"
          // start

          ///end
        },
        {
          name: "Search user",
          url: "/customers/search",
          icon: "icon-puzzle",
          ///start
          children: [
            {
              name: "sub menu 1",
              url: "/login",
              icon: "cui-people"
            },
            {
              name: "sub menu2",
              url: "/customers/search",
              icon: "icon-puzzle"
            },
            {
              name: "submenu 3",
              url: "/base/carousels",
              icon: "icon-puzzle"
            }
          ]

          ///end
        },
        {
          name: "Carousels",
          url: "/base/carousels",
          icon: "icon-puzzle"
        }
      ]
    },
    {
      name: "Management",
      url: "/mangement",
      icon: "fa fa-book",
      children: [
        {
          name: "Buttons",
          url: "/buttons/buttons",
          icon: "icon-cursor"
        },
        {
          name: "Button dropdowns",
          url: "/buttons/button-dropdowns",
          icon: "icon-cursor"
        },
        {
          name: "Button groups",
          url: "/buttons/button-groups",
          icon: "icon-cursor"
        },
        {
          name: "Brand Buttons",
          url: "/buttons/brand-buttons",
          icon: "icon-cursor"
        }
      ]
    },

    {
      divider: true
    },
    {
      title: true,
      name: "Extras"
    },
    {
      name: "Disabled",
      url: "/dashboard",
      icon: "icon-ban",
      attributes: { disabled: true }
    }
  ]
};

我只想在特定侧边栏元素单击到侧边栏元素请求的组件时传递道具。

请提供任何帮助！

Answer 1

您无法重新呈现 coreui 模板的侧边栏，因为侧边栏数据来自 _nav.js。

Coreui 使用 import 来获取 json 数据，所以我们不能从 states 或 props 改变它，你还需要了解 React.lazy() 函数用于导入数据 DefaultLayout 本身。

你唯一能做的就是在开始时获取权限数据并将其导入_nav.js，这样你就可以签入这个文件，如果你有权限允许用户使用特定的路由。

确保您不能提供空对象或数组，否则您需要将其从 items 数组中删除。

如果您更改权限，您需要重新加载以指定侧边栏的新元素。

当点击侧边栏项目想要传递一些道具来检查隐藏或显示组件中的一些按钮时，核心 ui reactjs 中的侧边栏菜单

when click on the sidebar item want to pass some props to to check hide or show some button in the component that the sidebar menu in core ui reactjs

reactjs

core-ui