Реагировать-всплывающая подсказка и Next.js Выпуск SSR

#css #reactjs #next.js #server-side-rendering

#css #reactjs #next.js #рендеринг на стороне сервера

Вопрос:

Я использую библиотеку react-tooltip в своем Next.js приложение.

Я заметил, что каждый раз, когда я обновляю веб-сайт при посещении страницы, использующей всплывающую подсказку, я получаю сообщение об ошибке:

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

Классы CSS различаются на клиенте и на сервере

Странная часть в том, что я не получаю эту ошибку при переходе со случайной страницы на страницу, использующую всплывающую подсказку.

Код, связанный с подсказкой:

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

Ответ №1:

У меня была такая же проблема, мне пришлось использовать state для определения того, когда компонент был смонтирован, и показывать всплывающую подсказку только после этого.

PS Вы не видите ошибку при навигации, потому что страница не отображается на сервере при навигации, это все интерфейс 🙂

1. @lemurry не могли бы вы предоставить пример кода? Как вы определили, был ли компонент смонтирован?

2. @FabianBosler вы можете сделать это с помощью useState и useEffect, которые выполняются только при первом рендеринге. codesandbox.io/s/brave-rosalind-4bb4v?file=/src/App.js Дайте мне знать, если вам понадобятся дополнительные объяснения.

Ответ №2:

В случае, если вы используете какой-либо рендеринг на стороне сервера (например Next.js ) — вам нужно будет сначала убедиться, что ваш компонент смонтирован, прежде чем показывать всплывающую подсказку react.

Я исправил это, используя следующее:

 import React, { useEffect, useState } from 'react';

const [isMounted,setIsMounted] = useState(false); // Need this for the react-tooltip

useEffect(() => {
    setIsMounted(true);
},[]);
 
return (<div>
      {isMounted amp;amp; <ReactTooltip id={"mytip"} effect={"solid"} />}

      <span data-tip={"Tip Here"} data-for={"mytip"}>Hover me</span>
</div>)

Ответ №3:

Вы должны обернуть свой JSX в следующий компонент:

 import React, { useEffect, useState } from 'react';

const NoSsr = ({ children }): JSX.Element => {
  const [isMounted, setMount] = useState(false);

  useEffect(() => {
    setMount(true);
  }, []);

  return <>{isMounted ? children : null}</>;
};

export default NoSsr;

Вот так:

 <NoSsr>
 <YourJSX />
</NoSsr>

Ответ №4:

Если вы работаете с NEXTJS, это может быть хорошим подходом, вы также можете проверить документацию здесь, также, если вы работаете с data-event, globalEventOff или любым другим реквизитом и не скрывается или не работает на вашем локальном хостинге, это происходит только в строгом режиме разработки. ReactTooltip отлично работает в рабочем коде с React 18. Таким образом, вы можете установить reactStrictMode: false в своем next.config.js чтобы протестировать его локально, а затем вернуть ему значение true, надеюсь, это поможет 🙂 ссылка на информацию здесь

 import dynamic from 'next/dynamic'

const ReactTooltip = dynamic(() => import('react-tooltip'), { ssr : false });

function Home() {
  return (
    <div>
     <Button
      data-tip
      data-event="click focus"
      data-for="toolTip"
      onClick={():void => ()}
     />
     <ReactTooltip id="toolTip" globalEventOff="click"/>
    </div>
  )
}

export default Home