Quiero agregar algunas clases a un elemento dinámicamente. Sé cómo hacerlo con html-dom y cómo hacerlo pasando una expresión de javascript a className . Pero esto no es lo que quiero hacer. Me pregunto si hay una forma de agregarlo, como push esa clase a una matriz o concatenarla en una cadena en ese objeto componente.
Es un pseudo-código de lo que estoy buscando:
const el = <div className='one' />; // Notice that I'm not using useRef hook. el.classList.push('two'); // OR: el.className += ' two';Por lo general, hará esto calculando el nombre de la clase antes de crear el elemento JSX:
let className = "one"; className += " two"; const el = <div className={className} />Si eso no es posible (por ejemplo, recibió este elemento como accesorio de un padre, por lo que ya tiene un nombre de clase de "uno"), entonces necesitaría usar cloneElement:
import { cloneElement } from 'react'; const el = <div className='one' />; const newElement = cloneElement(el, { className: el.props.className + " two "});Debería intentar tener una variable de matriz con sus diferentes clases donde puede empujar condicionalmente las clases que necesita y en su jsx dividir la matriz.
Como esto:
const classNames = ['one'] classNames.push('two'); const el = <div className={classNames.split(' ')} />;Su elemento no es un elemento de nodo donde tiene una propiedad classList y puede agregar y eliminar clases. Es un elemento JSX. Incluso si se parece a un elemento html en su estructura.