雑文発散

▼ [Crowi] react-i18next の使い方の理解が少し進んだ

[i18next.com](http://i18next.com] のドキュメントを読み進めていくうちに、404 を見つけたので pull request を投げた。そして取り込まれた。

• https://github.com/i18next/i18next.com/pull/16

このドキュメントサイトは、Gatsby という「Markdown などの plain text を React でくるんで、リッチなインターフェイスを持ったサイトを作るシステム」を使っていた。全く知らなかったけど、GitHub Star が 6000 を超えてたりするので、有名なヤツみたいだ。

それはそれとして、手元で react-i18next がうまく動かないなーと思っていた原因がわかった。

react-i18next を使う React コンポーネントを export するときの記述が間違っていたのだ。

import React from 'react';
import { translate } from 'react-i18next';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { t } = this.props;
    return (
      <div>{ t('WANT TO TRANSLATE SENTENCE') }</div>
    );
  }
}

// export default MyComponent; // これだとダメ
export default translate()(MyComponent); // こっちが正解

次は各言語用の定義ファイルをどうやって読むか。React コンポーネント側から xhr で取得する方法（ i18next-xhr-backend ）があるので、それを使ってリクエストを投げるのが良いのかなと思っている。