Tengo un SVG como componente de reacción llamado AdultDog . Mi plan es hacer que desaparezcan todas las etiquetas en este componente de reacción que no contienen un cierto número en el campo ID para que solo se muestren las etiquetas con una identificación que contiene un número. es decir, se muestran las etiquetas que tienen un ID 402. He intentado usar document.querySelectorAll(":not([id^='402'])"); pero esto tiene dos problemas.
document.querySelectorAll toma toda la página html, no el componente AdultDog , entonces, ¿cómo puedo hacer que solo seleccione AdultDog?document.querySelectorAll(":not([id^='402'])"); solo selecciona identificadores llamados '402', pero quiero identificadores que contengan otras palabras. es decir 402-tooth y 402-recede import {ReactComponent as AdultDog} from '../../images/dog-dental-chart-with-treatments_v6.svg'; function DisplayTooth(props) { const navigate = useNavigate(); console.log(props.toothnumber, 'Display tooth') useEffect(() => { var elements = document.querySelectorAll(":not([id^='tooth-402-GH-02'])"); console.log('elements', elements) }, [props.toothnumber]) return (<div> <div className='tooth-box'> <AdultDog></AdultDog> </div> </div> ); } export default DisplayTooth;¡Esto es bastante así que cualquier ayuda sería apreciada! No puedo encontrar mucha documentación sobre SVG tal como está.
Por lo general, estaría creando todos los componentes de <AdultDog> , por ejemplo, {dogs.map(dog => <AdultDogs key={dog.id} dog={dog}/>)} y simplemente podría agregar un filtro, por ejemplo dogs.filter(your filter logic here).map() para eliminar algunos de los perros.
Otro enfoque es agregar una clase a algunos elementos para que pueda activarlos o desactivarlos.