React-tooltip dan masalah SSR Next.js

Sep 27 2020

Saya menggunakan pustaka react-tooltip di aplikasi Next.js saya.

Saya perhatikan bahwa setiap kali saya menyegarkan situs web saat mengunjungi halaman yang menggunakan tooltip saya mendapatkan kesalahan:

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

Kelas CSS berbeda pada klien dan di server

Bagian yang aneh adalah saya tidak mendapatkan kesalahan itu saat menavigasi dari halaman acak ke halaman yang menggunakan react-tooltip.

Kode terkait tooltip:

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

Jawaban

1 lemurry Oct 15 2020 at 02:17

Saya memiliki masalah yang sama, saya harus menggunakan status untuk mendeteksi kapan komponen telah dipasang, dan hanya menampilkan tooltip setelah itu.

PS Anda tidak melihat kesalahan saat menavigasi, karena halaman tidak ditampilkan di server saat Anda menavigasi, semuanya front-end :)