Question

我正在使用react-bootstrap，并且正在显示导航栏。在其中，我通过i18n显示了一个特殊的按钮，可以切换语言。预期的行为将是在移动设备上，当单击导航栏的某个元素时，它将与动画合拢。由于某些原因，此按钮无法使用。

我发现了一个工作方式：我模拟了切换按钮的单击，但是这导致了一个问题：导航栏折叠，但是没有更快的动画。可能是因为react使用重新翻译的内容重新渲染了整个网站。
因此，我将具有预期的行为：在移动设备上，当我单击翻译按钮时，它将折叠导航栏，并显示折叠动画。

我希望我能说清楚。

这是我的翻译按钮组件：

from django.conf import settings

这是我的导航栏组件


/**
 * Translation button, that translate the whole page. It switches between english (by default) and french
 */
function TranslationButton(props: { onClick: () => void; }): ReactElement {
  const { t, i18n } = useTranslation();
  const [state, setState] = useState<{ isEnglish: boolean, buttonLabel: string }>({
    isEnglish: i18n.language.includes("en"),
    buttonLabel: i18n.language.includes("en") ? "en" : "fr",
  });

  /**
   * Switch language between en and fr
   */
  const changeLanguage = useCallback(
    (lng: string): void => {
      if (!i18n) {
        return;
      }
      i18n.changeLanguage(lng);
    },
    [i18n]
  );

  /**
   * When we click on the translate button, we switch the button label, and switch the language
   */
  const handleClick = (): void => {
    const isEnglish: boolean = !state.isEnglish;
    const buttonLabel: string = isEnglish ? "en" : "fr";
    setState({
      isEnglish,
      buttonLabel,
    });
    changeLanguage(buttonLabel);
    // Toggle navbar
    props.onClick();
  };

  return (
    <OverlayTrigger
      placement="bottom"
      delay={{ show: 0, hide: 0 }}
      overlay={renderTooltip(t("translationTooltip"))}
    >
      <Button className="m-auto buttons" variant="outline-light" onClick={handleClick}>
        <MdTranslate className="mr-2" />
        {state.buttonLabel.toUpperCase()}
      </Button>
    </OverlayTrigger>
  );
}

触发导航栏折叠动画

0 个答案: