#reactjs #redux #react-hooks #higher-order-components
Вопрос:
Я хочу показать/скрыть элемент, присутствующий в компоненте, на основе разрешения уровня роли, вот код, который я пробовал до сих пор
Мой Компонент:
<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 на основе условия.
Спасибо
Ответ №1:
То, что вы описали, не является случайностью. Это нормально, композиция компонентов(когда вы вкладываете компонент для отображения в другой компонент, обеспечивающий управление) подходит даже лучше, чем здесь.
Таким образом, вы 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;
}
}