React SVG - zmiana koloru path, kiedy jest ich dużo

Question

Witam,
mam svg, które zawiera około 1000 potomków path. Importuję je za pomocą

import { ReactComponent as SvgMap } from './ww.svg';
...
return(
  <SvgMap/>
);

i teraz chciałbym zmienić w jednym z path o odpowiednim ID jego fill kolor. Jak mogę to zrobić?

Jeszcze dodam, że najlepiej gdyby nie wiązało się to z ponownym renderowaniem SVG oraz, że kolor path jest generowany m.in na podstawie ID.

Answer 1

Na oko - nie znając komponentu SvgMap - możesz mu podpiąć ref i gdy on się wyrenderuje, to querySelectorem wyszukać konkretny path po identyfikatorze i zmienić mu styl fill.

Coś w tym stylu:

import { ReactComponent as SvgMap } from './ww.svg';
...

function YourComponent() {
  const svgMapRef = useRef();

  useEffect(() => {
    if (svgMapRef.current) {
      svgMapRef
        .current
        .querySelector( <tutaj_id_patha> )
        .style
        .fill = <nowa_wartość>;
    }
  }, [svgMapRef.current]);

  return (
    <SvgMap ref={svgMapRef}/>
  );
}

 

Comments

Dlaczego w parametrze useEffect jest ref? Nie wywoła to nieskończonej pętli? Skoro będzie wywoływana zmiana ref przy każdej zmianie ref?

---

svgMapRef.current jest przekazany w parametrze do useEffect, żeby ograniczyć wywoływanie jego callbacka tylko do momentów, gdy svgMapRef.current zmieni wartość. Nieskończonej pętli być nie powinno, bo referencja zmieni wartość raczej tylko raz - z null na element DOM.

---

Chociaż być może lepiej jest użyć useCallback żeby nie było odwrotnej sytuacji, że React nie odświeży komponentu, w którym tworzysz ref.