Tengo una aplicación basada en ReactJS escrita en TypeScript para la cual implementamos ciertos controladores de clics.
Otros equipos contribuyen a esta aplicación e incluso pueden implementar sus propios controladores y eventos. La cuestión es que debemos asegurarnos de que un controlador de clics específico debe ejecutarse después de otros controladores de clics en la aplicación.
Esto debe ser un controlador de clics global (fuera de React).
Sé que puedo administrar eventos DOM globales en React, incluso usando ganchos, pero no he encontrado la manera de seguir y respetar una jerarquía definida para eventos de clic o cualquier tipo de evento.
También revisé los eventos globales de esta pregunta de desbordamiento de pila, pero no puedo encontrar una manera de asegurarme de que mi controlador de clics tenga prioridad sobre otros en el mismo nivel o garantizar que el mío aparezca en DOM antes que otros.
Apreciaría si pudiera señalarme en la dirección correcta.
Puede envolver el controlador de clic predeterminado con su propia función. La forma más fácil de hacer esto es colocar este código en su componente personalizado en el que se puede hacer clic. Por ejemplo:
const Button = ({ onClick, ...props }) => { const handleClick = (...args) => { // you should add try ... catch and/or await here if needed onClick && onClick(...args); // this is your custom "global" handler imported from somewhere handleGlobalButtonClick(); } return <button onClick={handleClick} {...props}> click me! </button>; }Esta es la solución que te sugiero que uses. Intentar inyectar "globalmente" dicha función a todos los componentes en los que se puede hacer clic mediante la manipulación de objetos globales hará que su base de código esté altamente acoplada y reducirá significativamente la mantenibilidad.
También puedes hacer, básicamente, lo mismo creando HOC . En este caso obtendrá más flexibilidad. Pero la forma de elegir depende en gran medida de la arquitectura de su proyecto.