React-tooltip i problem z SSR Next.js.

Question

Korzystam z biblioteki reagowania na podpowiedzi w mojej aplikacji Next.js.

Zauważyłem, że za każdym razem, gdy odświeżam witrynę podczas odwiedzania strony, która używa podpowiedzi, pojawia się błąd:

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

Klasy CSS są różne na kliencie i na serwerze

Dziwne jest to, że nie dostaję tego błędu podczas przechodzenia z losowej strony do strony, która używa podpowiedzi reagowania.

Kod powiązany z etykietką:

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>

Answer 1

Miałem ten sam problem, musiałem użyć stanu, aby wykryć, kiedy komponent został zamontowany, i wyświetlić etykietkę dopiero po tym.

PS Nie widzisz błędu podczas nawigacji, ponieważ strona nie jest renderowana na serwerze podczas nawigacji, to wszystko jest front-end :)