Digamos que tengo este componente, que representa un destino para soltar.
import { useDrop } from 'react-dnd'; import './css/DraggableGameSlot.css'; type DraggableGameSlotProps = { className: string, text: string } function DraggableGameSlot(props: DraggableGameSlotProps) { const [{isOver}, drop] = useDrop(() => ({ accept: "image", collect: (monitor) => ({ isOver: !!monitor.isOver(), }) })) return ( <div className={`draggable-game-slot ${props.className}`} ref={drop}> <span>Drop here</span> </div> ) } export default DraggableGameSlot;Cuando se coloca un elemento en el div, quiero obtener el nombre de clase del div (console.log estaría bien, implementaré la lógica que quiero)
¿Cómo debo modificar el código para obtener esta funcionalidad?
De acuerdo con la documentación de useDrop de react-dnd, el gancho useDrop devuelve
Matriz de valores devueltos
[0] - Collected Props : un objeto que contiene propiedades recopiladas de la función de recopilación. Si no se define una función de recopilación, se devuelve un objeto vacío.[1] - DropTarget Ref : una función de conector para el destino de colocación. Esto debe adjuntarse a la parte de destino del DOM. Entonces, al tener DropTarget Ref , debería poder hacer algo como drop.current.classList para obtener las clases del elemento html de destino.