Tuve que reescribir una clase como una función en JS/React, pero tengo algunos problemas para que el gancho funcione en la función.
function Switch(props) { const [isActive, setIsActive] = React.useState(); function handleClick() { setIsActive(!isActive); } const className = `switch ${props.color} ${props.isActive ? 'on' : 'off'}`; return ( <div className={className}> <button className="img" onClick={handleClick} /> <h3>{props.title}</h3> </div> ); } ReactDOM.render(( <Switch title="Happiness" color="blue" isActive={false} /> ), document.querySelector('#root'));Intenté cambiar la función handleClick (y setIsActive dentro de ella), pero no puedo hacer que funcione. ¡Gracias de antemano por la ayuda!
Nota: No agregué el CSS, ya que esa parte funciona bien.
Está tomando isActive de accesorios en lugar de estado. Para que esto funcione, debe cambiar
const [isActive, setIsActive] = React.useState();a
const [isActive, setIsActive] = React.useState(props.isActive);y
const className = `switch ${props.color} ${props.isActive ? 'on' : 'off'}`;a
const className = `switch ${props.color} ${isActive ? 'on' : 'off'}`;Además, si desea aplicar cambios de accesorios desde el exterior, debe agregar un gancho useEffect como tal
useEffect(() => { setIsActive(props.isActive) }, [props.isActive])Está intentando cambiar los accesorios que recibe el componente por un estado dentro de los componentes secundarios. Los accesorios son (deberán ser) inmutables. Si desea modificar el comportamiento del componente,
copiar los apoyos en la variable de estado
const [isActive, setIsActive] = React.useState(props.isActive);
use la forma de función de actualización de estado. Más importante en los casos en que el nuevo estado depende del estado anterior
function handleClick() { setIsActive(prevState=>!prevState.isActive); }
Actualice la referencia a la variable de estado en lugar del valor prop recibido
const className = cambiar ${props.color} ${isActive? 'encendido': 'apagado'} ;
También debe observar el estado del componente isActive. Puede lógico O con sus accesorios isActive (que actúa solo como un valor predeterminado aquí):
const className = `switch ${props.color} ${ props.isActive || isActive ? "on" : "off" }`;