Как справиться с необычным поведением кнопок в массиве?
Допустим, у меня есть панель навигации с несколькими кнопками (Главная, Продукты, Работа и т. д.). Все они, кроме, например, кнопки выхода из системы, служат только одной цели — навигации пользователя. Кнопка выхода, помимо этой общей цели, также должна отправлять запрос на серверную часть, например, для очистки пользовательских файлов cookie. Кроме того, в случае расширения приложения мы должны сделать массив кнопок и сопоставить их с компонентом. Так это выглядит примерно так:
const coolButtons = [{path: '/Profile', title: 'Profile'}, {path: '/', title: 'Sign out'...}]
const testComponent = () => {
return (
<div>
{coolButtons.map((button) => (
<Button data-path = {button.path}>{button.title}</Button>
))}
</div>
);
};
А потом вот в компоненте я тоже хочу написать обработчик всех этих кнопок.
const handleClick = (e: React.MouseEvent<HTMLElement>) =>{
if (path)
navigate(e.currentTarget.dataset.path)// navigate from useNavigate().
}
Но как я могу обрабатывать логику выхода из системы? Очевидно, что первая мысль, которая приходит на ум, — просто добавить условное выражение и проверить, является ли путь === выходным путем, и если да, то выполнить свою часть логики:
const handleClick = async (e) => {
const { path } = e.currentTarget.dataset;
if (path) {
if (path === '/signout') {
await logout(); // for example
navigate(path);
}
navigate(path);
}
};
Но не кажется ли это решение довольно глючным? Что еще я мог бы сделать здесь? Что, если у нас есть 2-3 кнопки с необычной логикой? Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не знаю, как вы создаете компонент Button, но я бы посоветовал вам сделать это. В объекте coolButtons вы можете создавать действия. Например,
const coolButtons = [{
path: '/Profile',
title: 'Profile'
}, {
path: '/',
title: 'Sign out',
action: async () => {
await logout();
}
}]
И после этого вы можете вызвать это действие в handleClick
const handleClick = (e) => {
const { path, action } = e.currentTarget.dataset;
if (path) {
action && action(); //if action is in your dataset, you just call it
navigate(path);
}
};