Реализация более «целостного» контекстного меню в ReactJS - PullRequest
0 голосов
/ 09 октября 2018

Я пытаюсь выяснить, является ли мой способ реализации контекстного меню в ReactJS способом 'React' (или, возможно, более продвинутым) или, возможно, я ошибаюсь.

У меня есть страница, которая напоминает «Проводник Windows» (часть очень большого веб-приложения), три основных области: - Левая панель: дерево папок - Правая панель: сетка папок и под ней Список файлов Все является компонентом, изTreeView к файлу / папке.

Для каждого «листового» компонента (элементы дерева, файлы в списке файлов и папка в «папке-сетке») требуется «контекстное меню», открытое многоточиемкнопка (не щелчок правой кнопкой мыши).

Наш стек FE - ReactJS, Redux & Saga

Я знаю, что простым способом было бы просто реализовать компонент ContextMenu (возможно, универсальный) длякаждый из этих компонентов в своем рендере - но мне было интересно узнать о более «цельном» подходе к проектированию системы ReactJS.

Поскольку на странице много объектов, для которых требуется контекстное меню, я подумал о немможет быть лучшим решением иметь компонент-оболочку в приложении, из которого компоненты могли бы запросить сброс ContextMenu.запрос будет представлять собой объект JSON с массивом «контекстных действий» - у каждого есть имя, значок и функция для вызова.

Предоставление компоненту с этой так называемой способностью запрашивать контекстное меню может быть выполнено с помощьюредукция или просто проталкивание вниз по дереву компонентов метода (ну, желательно - нет)

Итак - реализация декларативного общесистемного контекстного меню «сервис» в ReactJS - решение о звуковой архитектуре или я плохой программист React:)?

1 Ответ

0 голосов
/ 09 октября 2018

Да, это вполне разумно.Фактически, мой пост Практическое Redux, часть 10: Управление модалами и контекстными меню демонстрирует почти такой точный подход.Единственное большое отличие состоит в том, что, чтобы оставаться в соответствии с принципом Redux «все действия должны быть сериализуемыми», я не включаю функции обратного вызова в объекты действия.Вместо этого я предоставляю объект «результат действия», который диалоговое окно может заполнить. Если вы действительно хотите включить функцию обратного вызова в действие, которое вы можете, но это, вероятно, приведет к некорректной работе отладки во время путешествияи это не считается идиоматическим использованием Redux.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...