react I18N 如何设置自动识别语言

React I18n可以使用navigator.language来获取用户的浏览器语言，然后根据用户的浏览器语言来选择不同的翻译文件。可以使用React Intl库来实现自动识别浏览器语言的功能。具体实现方法为：

1. 使用React Intl库中的IntlProvider组件来包裹整个应用，并传入用户的浏览器语言。

import { IntlProvider } from 'react-intl';
import enMessages from './locales/en.json'; // 英文翻译文件
import zhMessages from './locales/zh.json'; // 中文翻译文件

const messages = {
  en: enMessages,
  zh: zhMessages,
};

const userLocale = navigator.language.split('-')[0]; // 获取用户浏览器语言，如'en-US'，只取'en'

<IntlProvider locale={userLocale} messages={messages[userLocale]}>
  <App />
</IntlProvider>

2. 将翻译文件按照语言类型分别存放在不同的json文件中，如'en.json'、'zh.json'等。

3. 根据用户的浏览器语言来选择不同的翻译文件进行渲染。例如，当用户的浏览器语言为英文时，会自动选择'en.json'文件中的翻译内容。

以上就是React I18n实现自动识别语言的方法。