0
127
VistasUso de useRef en iconos importados de React Icons
Solo estoy tratando de establecer una referencia en un icono React importado. Pero por alguna razón no funciona. Recibo el siguiente mensaje de error:
"Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'estilo')"
¿Hay alguna forma especial de referirse a un archivo importado?
import React from 'react' import { useRef } from 'react' import {HiPlus, HiThumbDown, HiThumbUp, HiArrowNarrowRight} from "react-icons/hi" function Card(props) { var addToFavRef = useRef() var thumbUpRef = useRef() var thumbDownRef = useRef() function addToFavorites(){ addToFavRef.current.style.color = "orange" addToFavRef.current.style.transform = "rotate(45deg)" } function thumbUp(){ thumbDownRef.current.style.color = "grey" thumbDownRef.current.style.opacity = "50%" } return ( <> <HiPlus className="cardPlusIcon" ref={addToFavRef}></HiPlus> <HiThumbUp className="cardThumbUp" ref={thumbUpRef} onClick={thumbUp}></HiThumbUp> <HiThumbDown className="cardThumbDown" ref={thumbDownRef} onClick={thumpDown}></HiThumbDown> </> ) } export default CardAquí está el mensaje:
1 Respuestas
Responde la pregunta0
No creo que haya una referencia adjunta a los iconos de reacción svg. Si usa mecanografiado, puede ver el error cuando intenta agregar uno.
Si realmente debe acceder al nodo dom, puede envolver cada ícono en un div o lapso y adjuntar una referencia a eso y luego puede acceder a él mediante el nodo secundario como ref.current.childNodes[0]
Pero no tiene sentido en su caso hacer esto si va a configurar el estilo simplemente configúrelo. No hay razón para acceder al nodo dom aquí. Puede hacerlo agregando clases o simplemente configurando el estilo directamente.
import {HiPlus, HiThumbDown, HiThumbUp, HiArrowNarrowRight} from "react-icons/hi" import {useState} from 'react' const thumbsUpStyle = { color: 'orange', transform: 'rotate(45deg)' } const thumbsDownStyle = { color: 'orange', transform: 'rotate(-45deg)' } const favoritesStyle = { color: 'grey', opacity: '50%' } export default function Card() { const [thumbs, setThumbs] = useState('') const [favorites, setFavorites] = useState(false) return ( <div className="card"> <HiPlus onClick={() => setFavorites(true)} style={favorites && favoritesStyle}/> <HiThumbUp onClick={() => setThumbs('up')} style={thumbs === 'up' && thumbsUpStyle}/> <HiThumbDown onClick={() => setThumbs('down')} style={thumbs === 'down' && thumbsDownStyle}/> </div> ); }O simplemente agregue una clase correspondiente y diseñe esa clase en su hoja de estilo
import {HiPlus, HiThumbDown, HiThumbUp, HiArrowNarrowRight} from "react-icons/hi" import {useState} from 'react' export default function Card() { const [thumbs, setThumbs] = useState('') const [favorites, setFavorites] = useState(false) return ( <div className="card"> <HiPlus onClick={() => setFavorites(true)} className={favorites && 'favorites-class'}/> <HiThumbUp onClick={() => setThumbs('up')} className={thumbs === 'up' && 'thumbs-up-class'}/> <HiThumbDown onClick={() => setThumbs('down')} className={thumbs === 'down' && 'thumbs-down-class'}/> </div> ); }