0

我正在使用没有 JSON 消息文件的 react-intl。相反，我只使用 .js 文件。我用<FormattedMessage id="" /> and <FormattedDate value={} />. 它可以正常工作。但是，react-intl 文档说使用 JSON 文件作为消息。

我想确定我是否在做正确的事情。没有 babel 配置，没有设置 package.json 文件或没有消息提取，到目前为止我没有收到任何错误。

我在下面做的事情正确吗？为什么他们建议使用 JSON 格式和 babel 配置？谢谢。

我的文件夹结构是：

├── src
│    ├── i18n
│    │       ├── locals.js
│    │       └── messages.js
│    ├── pages
│    │       ├── Home.js
│    │       ├── Footer.js
│    │       └── Navbar.js
│    ├── redux
│    │       └── ....js
│    │ 
│    ├── components
│    │       ├── ....js
│    │       └── ....js
│    ├── App.js
│    ├── App.css
│    ├── index.js
│    └── index.css
├── .env
── package.json

我的 message.js 文件是这样的，所有消息都存储在一个文件中：

export const messages = {
  "tr-TR": {
    ...
    sidebar_personal: "Personel Bilgileri",
    breadcrumb_homepage: "Anasayfa",
    profile: "Kullanıcı Bilgileri",
    ...
  },

  "de-DE": {
   ...
   breadcrumb_homepage: "Startseite",
   sidebar_personal: "Stammdaten Personal",
   profile: "Nutzerinformation",
   ...
  },
};

locales.js 文件：

export const LOCALES = {
  TURKISH: "tr-TR",
  GERMAN: "de-DE",
};

在 APP.js 中，我包装了所有路由：

import { LOCALES } from "./i18n/locales";
import { messages } from "./i18n/messages";
...
function App() {
  const currentLang = useSelector((state) => state.setLang);

  return (
    <React.Fragment>
     ...
              <IntlProvider
                locale={currentLang}
                defaultLocale={LOCALES.GERMAN}
                messages={messages[currentLang]}
              >
                <Routes />
              </IntlProvider>
     ...
    </React.Fragment>
  );
}

export default App;

我使用 redux 来更改语言：

import * as types from "../../constants/index";

export const setLang = (value) => {
  localStorage.setItem("lang", JSON.stringify(value));
  return {
    type: types.LANG_SET,
    payload: value,
  };
};
import * as types from "../../constants/index";

export const setLangReducer = (state = {}, action) => {
  switch (action.type) {
    case types.LANG_SET:
      return action.payload;
    default:
      return state;
  }
};
4

0 回答 0