когда вы нажимаете на элемент боковой панели, вы хотите передать некоторые реквизиты, чтобы проверить, скрыть или показать какую-то кнопку в компоненте, который меню боковой панели в основном пользовательском интерфейсе реагирует

Question

В моем проекте я использую шаблон администрирования corui, responsejs & redux. Я пытаюсь сделать разрешения в своем проекте.

В данный момент в моей БД у меня определены эти разрешения (проверьте моиimage)! (https://imgur.com/a/O2ZtakF)

вот мое текущее представление о том, что я хочу решить проблему! (https://imgur.com/KnRRuSD)

моя проблема в этой боковой панели coreui, когда я нажимаю элемент боковой панели, скажем,«sub menu1», тогда в это время я хочу передать права доступа, полученные от DB, в качестве реквизита для того компонента, который принадлежит элементу «sub menu1», который я нажимаю, после того, как этот компонент в левой части изображения загружается, я хочуотключить или включить кнопку регистрации с этим реквизитом.

как я могу справиться с этой проблемой с помощью боковой панели 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 использует импорт для получения данных json, поэтому мы не можем изменить его из состояний или реквизитов. Также необходимо понимать, что функция React.lazy() используется для импорта данных DefaultLayout.

Единственное, что нужновы можете вначале получить данные о разрешениях и импортировать их в _nav.js, чтобы в этом файле можно было проверить, есть ли у вас разрешение на разрешение пользователя для определенного маршрута.

Убедитесь, что вы не должны предоставлять пустой объект или массив в другом состоянии, вам нужно удалить его из массива items.

Если вы изменяете разрешение базы данных, вам необходимо перезагрузить систему, чтобы указать новые элементы боковой панели.