Tengo una situación habitual en la que un componente React recibe un nombre de evento y una función de controlador como accesorios, y debo adjuntar esta función y un controlador de eventos para dicho evento en el elemento devuelto por este componente:
const Component(eventName, handler) => { return <div>{...}</div> }Mi idea inicial era crear un objeto de utilería y extenderlo en el componente:
const Component(eventName, handler) => { const props = { ['on'+eventName]: handler }; return <div {...props}> {...} </div> } El problema es que el nombre del evento viene en minúsculas, como click , dragend , etc.
Y React espera la sintaxis de mayúsculas y minúsculas en su lugar.
Entonces, si recibo una cadena de 'clic' como accesorio, tiene que convertirse en una tecla onClick en el objeto de props . Esto no es tan simple como poner el evento en mayúsculas y anteponer 'on', ya que algunos eventos tienen varias palabras. Por ejemplo, dragend debe convertirse en onDragEnd para que React sea feliz.
¿Alguien tiene sugerencias sobre cómo puedo lograr esto sin mantener una lista enorme de nombres de eventos -> propiedades jsx asignadas en este componente?
¿Las funciones del controlador de eventos esperan que cuando se las llame, se les entregue un objeto de evento del navegador o un objeto de evento sintético de reacción?
Si están esperando eventos del navegador (lo que parece probable ya que están usando la convención de nomenclatura de eventos del navegador), entonces podría tener sentido registrar todos los eventos con un efecto; consulte a continuación.
Tenga en cuenta que he hecho el trabajo para memorizar el objeto prop del evento. Esto no es estrictamente necesario para la funcionalidad, pero ayudaría con el rendimiento si este objeto de evento cambiara de identidad con frecuencia en el elemento principal de su componente:
import React, { useEffect, useRef } from "react"; import isDeepEqual from "fast-deep-equal/react"; const testEvents = { click: () => console.log("click event handler fired!"), mouseover: () => console.log("mouseover event handler fired!"), mouseleave: () => console.log("mouseleave event handler fired!") }; const TestComponent = ({ events }) => { const ref = useRef(null); const memoizedEvents = useMemoizedEvents(events); useEffect(() => { const currentRef = ref.current; Object.entries(memoizedEvents).forEach(([name, handler]) => currentRef.addEventListener(name, handler) ); // This function cleans up old event handlers. // It will run whenever memoziedEvents changes before the new handlers are registered. return () => Object.entries(memoizedEvents).forEach(([name, handler]) => currentRef.removeEventListener(name, handler) ); }, [memoizedEvents]); return ( <div ref={ref}> DOM Element with Event Handlers </div> ); }; /** * This hook makes sure that the "events" object only changes identity if any of the things within it have changed. * This way, the effect that registers/unregisters the click handlers won't run unnecessarily. */ function useMemoizedEvents(events) { const eventsRef = useRef(); if (!isDeepEqual(eventsRef.current, events)) { eventsRef.current = events; } return eventsRef.current; } const App = () => <TestComponent events={testEvents} />;Ver este CodeSandbox