Блог

Я хочу показать/скрыть элемент, присутствующий в компоненте, на основе разрешения уровня роли, вот код, который я пробовал до сих пор

Мой Компонент:

    <ShowForPermission permission="My Studies" configuration={configuration}>
  <div>Mystudies</div>
   <ShowForPermission>
 

СПЕЦИАЛЬНАЯ:

 import React from 'react'

export const ShowForPermission = ({ permission, configuration}) => {

    
    const isAllowed = checkPermission(permission, configuration);

     return isAllowed
     
    
  }

  export const checkPermission = (permission, configuration) => {
   
    return configurationamp;amp;configuration.filter((item)=>item.name===permission)[0].permission.read
}
 

Здесь, в моем компоненте, я передаю ключ в качестве конфигурации моего исследования и роли этого конкретного компонента в качестве конфигурации для ShowForPermission
И в случае, если я проверяю данный ключ, т. е. разрешение «Мои исследования» равно configuration.filter((item)=>item.name==="My Studies") тому, что я проверяю, предположим, что это значение верно, я хочу, чтобы в моем компоненте присутствовал div, иначе нет. Как этого добиться. Пожалуйста, помогите мне в этом

if permission.read==true, return true else false и визуализируйте div на основе условия.

Спасибо

То, что вы описали, не является случайностью. Это нормально, композиция компонентов(когда вы вкладываете компонент для отображения в другой компонент, обеспечивающий управление) подходит даже лучше, чем здесь.

Таким образом, вы ShowForPermission выполняете некоторую проверку и визуализируете любой предоставленный вложенный компонент(вложенные компоненты передаются как children prop).

 export const ShowForPermission = ({ permission, children }) => {
  const isAllowed = ..... // do some permission check
  if (isAllowed) {
    return children; // rendering nested elements
  } else {
    /*
     it also might be false, empty string or empty array
     (and for React 18 it can be `return;` or `return undefined` as well);
     also you even can omit explicit `return undefined;` for `else` branch
     but this way intention is more clear
    */
    return null; 
  }
}

 

Но как вы добираетесь configuration ? Определенно не выдаю это за реквизит. Почему? Потому что вам нужно будет проходить его каждый раз, когда вы используете ShowForPermission . И чтобы передать его во вложенном компоненте 3-го, 5 — го или 10-го уровня, вам придется передать configuration каждому его родителю по строке. Это имеет название «буровая установка», и контекстный API-это именно то, что было создано для решения этой проблемы.

Контекстный API-это способ ввода данных в компонент без явной передачи их каждому родителю в качестве поддержки. Посмотрите примеры в документах, наконец, ваше приложение должно загрузить конфигурацию и создать <YourContextProvider value={configurationData}> где-нибудь в самом корневом элементе приложения или рядом с корнем. Я намеренно пропускаю вопрос о том, как вы можете загрузить эту конфигурацию перед переходом к контексту(большая отдельная тема, и она также соответствует вашим требованиям).

Наконец, вы ShowForPermission получите доступ к данным из контекста(желательно с useContext помощью крючка), чтобы проверить разрешение:

 export const ShowForPermission = ({ permission, children }) => {
  const configuration = useContext(YourPermissionContext);
  const isAllowed = configuration
    .filter(
      (item) => item.name===permission
    )[0].permission.read;

  if (isAllowed) {
    return children; // rendering nested elements
  } else {
    return null; 
  }
}