React

如何在 React 应用程序中使用 Magic Translate。

安装

在你的应用程序中安装 Magic Translate 的 React 客户端。

# using npm
npm i @magic-translate/react

# using yarn
yarn add @magic-translate/react

然后将你的应用程序包装在 <MagicTranslateProvider> 中。

import { MagicTranslateProvider, Language } from '@magic-translate/react';

const MyApp = () => (
  <MagicTranslateProvider
    apiKey="<your-api-key>"
    language={Language.DE} // any supported language
  >
    {/* your app */}
  </MagicTranslateProvider>
);

如果你还没有 API 密钥，请注册 Magic Translate 来获取一个。

现在，你可以在应用程序中的任何地方使用 <T> 组件。

import { T } from '@magic-translate/react';

const SomeComponent = () => <T>Please translate me!</T>;

仅此而已。您的应用程序现在可以翻译成 70 多种语言。

更改语言

要更改当前语言，请更改 MagicTranslateProvider 的 language prop。您的所有内容都会自动翻译成新语言。

或者，你可以使用 useLanguageSwitcher() hook。

import { useLanguageSwitcher } from '@magic-translate/react';

const SomeComponent = () => {
  const { setLanguage, currentLanguage } = useLanguageSwitcher();

  return (
    <>
      <div>Current language is: {currentLanguage}</div>
      <button onClick={() => setLanguage('de')}>German</button>
    </>
  );
};

当你使用 useLanguageSwitcher() hook 时，MagicTranslateProvider 的 language prop 仅设置初始语言。之后更改 prop 没有任何效果。

示例项目

你可以在 GitHub 上找到一个示例项目。