Как привязать монитрование React компонента к элементам вне React?
Здравствуйте!
Столкнулся с проблемой использования отдельных компонентов на странице. Раньше делал только понлноценные приложения на React, а не встаивал его кусочками.
Для примера, есть модальное окно, которое является компонентом - AuthModal. Это модульное окно открывается по клику на несколько кнопок на странице. Как сделать, чтобы разничные кнопки монитровали или, если компонент уже смонтирован, ломали его? Таких компонентов много и я хотел создать уникальное решение для всех.
Моё решение было сделать функцию, которая операция на название класса - AuthModal. Кнопкам дать классы "react__toggle__AuthModal". Ну и по классу навесить событие onclick на каждую кнопку.
Проблема в том, Laravel Mix в продешкеновой сборке минифицирует название классов. А опредлял селектор для навешивания onclick я через const componentName = Component.name;
Чтобы как-раз таки в функцию передать только 1 параметр компонента и функция сама определила класс кнопок и задала им события. Но из-за монификации названия классов слетают и вставлять в HTML класс "react__toggle__AuthModal" бесполезно, так как класс начинает называется подургом.
Есть вариант отключить минификацию названия классов в сборщике, но мне кажется, что я выбрал, просто, неправильную логику работы.
Не знаю насчет laravel, но большие шансы что вы можете вместо класса использовать data- аттрибуты, и они будут нетронуты data-react-component="AuthModal" Записываете туда название класса, и дальше уже прикручивать все что хотите.
Средний