React 多國語言簡介(使用 react-intl) 使用 Yahoo react-intl

Lin Yen-Cheng on 2017-09-21 3 min. read

安裝

Install it: npm install –save react-intl

專案配置

先加入addLocaleData各語系配置檔,呆丸專用繁體中文 zh-Hant-TW 已包含在 zh 中可以直接使用,然後透過IntlProvider注入相關環境及設定到我們的 App 中,其中像是現在要顯示的語系(locale)及翻譯黨(messages),然後就可以透過更改 local 及 message 達到語言切換的目的~

import { addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import zh from "react-intl/locale-data/zh";
import es from "react-intl/locale-data/es";

addLocaleData([...en, ...zh, ...es]);

<IntlProvider locale=&#123;localeProp&#125; key=&#123;localeProp&#125; messages=&#123;messagesProp&#125;>
  <App />
</IntlProvider>;

使用

假設雙語的話,就是三位一體的概念,首先必須把專案裏需要雙語的地方改成特定元件或是變數,接著配合剛才的元件或變數中的id撰寫翻譯檔,然後透過改變剛剛提到的 locale, message 去對應切換相關語言翻譯檔~

一般顯示

<FormattedMessage id="App.hello" />

當成變數使用,注入後使用

const App = (props) => &#123;
  const &#123; intl &#125; = props;
  const strHello = intl.formatMessage(&#123; id: "App.hello" &#125;);
&#125;;
injectIntl(App);

英文語言

&#123;
  "App.hello": "hello"
&#125;

中文語言

&#123;
  "App.hello": "哈囉"
&#125;

小建議

完全建議在專案一開始就加入多國語言的配置,這樣才不會到後來各種麻煩 QQ 底下 Demo 了一個交換語言用的 Container,透過每次改變語言去改變狀態並傳入 IntlProvide 中,當然也可以考慮用 HOC 的方式去包裝~

class HotSwappingIntlProvider extends React.Component &#123;
  constructor(props) &#123;
    super(props);
    const &#123; initialLocale: locale, initialMessages: messages &#125; = props;
    this.state = &#123; locale, messages &#125;;
    this.handleChange = this.handleChange.bind(this);
  &#125;

  handleChange(locale) &#123;
    let messages = enJson;
    if (locale !== "en") &#123;
      messages = zhJson;
    &#125;

    this.setState(&#123;
      locale: locale,
      messages: messages,
    &#125;);
  &#125;

  render() &#123;
    return (
      <IntlProvider
        locale=&#123;this.state.locale&#125;
        key=&#123;this.state.locale&#125;
        messages=&#123;this.state.messages&#125;
      >
        &#123;this.props.children&#125;
      </IntlProvider>
    );
  &#125;
&#125;

喜歡這篇文章,請幫忙拍拍手喔 🤣

share