Tengo un lapso que tiene un className. El lapso tiene dos estados, uno es como
<span key={uuid()} ref = {colorRef} className = 'singleWord'>{word}</span>y el otro es como
<span key={uuid()} ref = {colorRef} className = 'singleWord redword'>{word}</span>Ahora lo que quiero es verificar el valor de className como className.classList.contain("oneClass') que hacemos en vanilla js pero necesito en el gancho de reacción (puede ser con gancho de referencia) y también agregar className y eliminar className . es posible verificar la longitud de className. Por ejemplo, 'singleword redword' debería dar una longitud de 2. Entonces, en general, necesito:
Puede almacenar en el estado una matriz de clases y usar eso para obtener toda la información que necesita, además de que brinda una manera fácil de alternar cualquier clase en un conjunto de clases.
básicamente, esta función handleClasses toma un argumento de clase y luego verifica si esa clase ya está en su estado. Si lo es, lo elimina, si no lo es, lo agrega al estado. Luego, en su lapso, une todas las clases en la matriz en estado para hacer una sola cadena de clases.
También obtiene la cantidad de clases aplicadas a su elemento muy fácilmente al hacer classes.length
import React, { useState } from 'react'; const Component = () => { const [classes, setClasses] = useState(['singleWord']); const numberOfClasses = classes.length; const handleClasses = (c) => { setClasses(classes.includes(c) ? classes.filter((cls) => cls !== c) : [...classes, c] ) } return ( <span onClick={() => handleClasses(passClassToToggleHere)} className={classes.join(' ')} > text </span> ) };Si está utilizando colorRef = useRef() , entonces puede obtener el nodo de destino llamando a colorRef.current y continuar con los métodos vanilla js como colorRef.current.classList.contain("oneClass') y así sucesivamente.