React App Framework - 7. App title & icon

前言

在切换页面时, 需要动态显示当前页面的标题, 而且需要支持多语言切换, 以及每个子应用会有自己的icon, 也需要统一显示

实现

icon

icon替换其实挺简单的, 在SubApp组件加载时设置即可, 注意一下在卸载app的时候将icon还原就行

const SubApp = () => {
  useEffect(() => {
    if (AppIconSrc) {
      const icon = document.querySelector<HTMLLinkElement>('link[rel="shortcut icon"]');
      const preIcon = icon.href;
      icon.href = AppIconSrc;
      return () => {
        icon.href = preIcon;
      };
    }
  }, []);
};

title

title的级别是每个页面不同, 所以需要在之前实现的RouteLazyComponent组件上实现, 这里注意下使用翻译后的key作为deps的依赖就能实现语言变化后自动刷新标题栏

这里使用useMemo的原因是, useEffect是从子组件调用到父组件的, 会导致最外层的app.title被最后设置, 覆盖实际页面设置的标题, 所以只能使用useMemo来保证最终的标题是正确的

const RouteLazyComponent = () => {
  const { t } = useTranslation();

  useMemo(() => {
    const appTitle = t(App.title);
    if (isApp) {
      document.title = appTitle;
      return;
    }
    const pageTitle = t(`${app}:${title}`);
    if (App.hasProject && project) {
      document.title = `${pageTitle ? `${pageTitle} - ` : ''}${project.code} - ${appTitle}`;
      return;
    }
    document.title = `${pageTitle ? `${pageTitle} - ` : ''}${appTitle}`;
    return;
  }, [title, project, t(`${app}:${title}`), t(App.title)]);
};

小结

本次实现的内容还是挺简单的, 但是对于用户体验来说是很重要的, 开发过程中稍微注意下翻译值和useEffect的调用顺序的问题就可以了