前端国际化实战：i18next 与 react-intl 配置及格式化

前端国际化实战指南

为什么需要国际化

最近看到一个项目，想拓展海外市场，但所有文本都是硬编码在代码里的。

反面教材

// 反面教材：硬编码文本
function App() {
  return (
    <div>
      <h1>欢迎来到我的网站</h1>
      <p>这是一个示例应用</p>
      <button>点击我</button>
      <div>
        <h2>产品列表</h2>
        <ul>
          <li>产品 1</li>
          <li>产品 2</li>
          <li>产品 3</li>
        </ul>
      </div>
    </div>
  );
}
export default App;

正确姿势

1. i18next

// 正确姿势：i18next
// 1. 配置
// i18n.js
 i18n  ;
 { initReactI18next }  ;

 resources = {
  : {
    : {
      : ,
      : ,
      : ,
      : ,
      : ,
      : ,
      : 
    }
  },
  : {
    : {
      : ,
      : ,
      : ,
      : ,
      : ,
      : ,
      : 
    }
  }
};

i18n
  .(initReactI18next)
  .({
    resources,
    : ,
    : ,
    : {
      : 
    }
  });

  i18n;



   ;
 { useTranslation }  ;

 () {
   { t, i18n } = ();
    = () => {
    i18n.(lng);
  };

   (
    
  );
}

  ;



   ;
   ;
   ;
 ;

.(
  ,
  .()
);