在React中使用react-i18next设置翻译后的文档标题（HTML标记）的最佳方法

Question

此刻，我正在像这样在功能组件中设置文档标题：

useEffect(() => { document.title = 'My title' }, []);

我希望我的网站支持不同的语言，所以我已经实现了react-i18next。 我有一些按钮可以更改调用以下函数的语言。这会立即在我的网页上更改字符串。

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

将前面提到的代码更改为下面的代码是可行的（请注意t('...')函数），但是仅在页面加载时有效。如果按语言按钮，则页面标题不会更新。

useEffect(() => { document.title = t('My title') }, []);

我该如何实现？

传递给其他组件的字符串存在相同的问题。例如

// inside parent
<ChildComponent title={t('My title')} />

// inside child
<h1>{props.title}</h1>

Answer 1

您的第一个问题是Array上的useEffect为空，您告诉React仅执行onMount内部的代码，这意味着当您更新语言时，此功能不会不会被触发。要解决此问题，请使用类似以下内容的

：

useEffect(() => { document.title = t('My title') }, [lang]);

我无法重现第二个问题。确保如果您更改语言，则该孩子会放弃。使用简单的console.log('rendered');

进行测试