使用 react-i18next 在 React 中设置翻译文档标题（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

你的第一个问题是 useEffect 上的空 Array，你告诉 React 只执行 onMount 里面的代码，这意味着当你更新你的语言时，这个函数不会被触发。要解决这个问题，请使用如下内容：

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

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

进行测试

Best way to set translated document title (HTML tag) in React with react-i18next