React中用react-i18next动态设置HTML文档标题的最优方案

这是个很常见的react-i18next使用问题，我来帮你一步步解决：

一、文档标题不更新的问题 #

你原来的useEffect依赖数组是空的，所以只会在组件首次挂载时执行一次。当切换语言时，t('My title')的返回值已经变了，但useEffect没有重新触发的条件，自然不会更新文档标题。这里有两种可靠的解决方式：

方案1：更新 useEffect 的依赖数组 #

把i18n.language和t加入依赖数组，这样当语言切换或者翻译函数更新时，useEffect会重新执行，更新文档标题：

import { useTranslation } from 'react-i18next';

function YourComponent() {
  const { t, i18n } = useTranslation();

  useEffect(() => {
    document.title = t('My title');
  }, [t, i18n.language]); // 关键：加入依赖，监听语言变化

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  // ... 其他组件代码
}

方案2：监听 i18n 的语言变化事件 #

如果你需要在语言切换时执行更多额外逻辑，可以直接监听i18n的languageChanged事件，记得在组件卸载时清理监听：

import { useTranslation } from 'react-i18next';

function YourComponent() {
  const { t, i18n } = useTranslation();

  useEffect(() => {
    // 初始化标题
    document.title = t('My title');

    // 定义语言变化后的处理函数
    const updateTitleOnLanguageChange = () => {
      document.title = t('My title');
    };

    // 绑定监听
    i18n.on('languageChanged', updateTitleOnLanguageChange);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      i18n.off('languageChanged', updateTitleOnLanguageChange);
    };
  }, [t, i18n]);

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  // ... 其他组件代码
}

二、父组件传递翻译字符串给子组件不更新的问题 #

这个问题的核心是：当语言切换时，父组件需要重新渲染，让t('My title')生成新的翻译值，才能传递给子组件更新。这里有两种处理思路：

思路1：确保父组件正确触发重渲染 #

只要父组件使用了useTranslation hook，当语言切换时，react-i18next会自动触发父组件重渲染，此时t('My title')会返回新的翻译字符串，子组件就能收到更新后的title props：

// 父组件
import { useTranslation } from 'react-i18next';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const { t } = useTranslation(); // 关键：使用useTranslation触发组件重渲染

  return (
    <div>
      <ChildComponent title={t('My title')} />
    </div>
  );
}

// 子组件（无需特殊处理，直接接收props即可）
const ChildComponent = ({ title }) => {
  return <h1>{title}</h1>;
};

export default ChildComponent;

如果你的子组件用了React.memo做性能优化，不用担心——翻译后的字符串是值类型，语言切换时会生成新的字符串，React.memo能正确识别到props变化并重新渲染。

思路2：子组件直接使用 useTranslation（更推荐） #

避免父传子的props传递，让子组件自己通过useTranslation获取翻译值，这样子组件能直接响应语言变化，不需要依赖父组件的重渲染：

// 子组件
import { useTranslation } from 'react-i18next';

const ChildComponent = () => {
  const { t } = useTranslation();
  return <h1>{t('My title')}</h1>;
};

export default ChildComponent;

这种方式更灵活，尤其当多个组件需要使用相同翻译文本时，能减少冗余的props传递。

内容的提问来源于stack exchange，提问作者Sabrina