Lingui React 插件

Lingui React 插件可用于提供语言切换器和 linguijs react。

入门

首先，安装插件

npm install -D storybook-addon-linguijs

注意：需要以下对等依赖项：@storybook/addons、@storybook/react、react 和 lingui/react。

将此行添加到您的 addons.js 文件中（如果需要，在您的 Storybook 配置目录中创建此文件）。

import "storybook-addon-linguijs/register";

在您的 config.js 中导入 setLinguiConfig 和 withLingui 函数。使用 setLinguiConfig 设置 lingui/react 的配置，并将 `withLingui` 作为装饰器使用。

import { addDecorator, configure } from "@storybook/react";
import { setLinguiConfig, withLingui } from "storybook-addon-linguijs";

// Provide a catalog or import and use your existing one
const catalogs = {
  en: {
    messages: {
      "Hello Button": "Hello Button"
    }
  },
  fr: {
    messages: {
      "Hello Button": "Bonjour Button"
    }
  }
};

// Set configuration
setLinguiConfig({
  locales: ["en", "fr"],
  defaultLocale: "en",
  catalogs
});

// Register decorator
addDecorator(withLingui);

// Run storybook
configure(() => require("./stories"), module);

在您的故事中，您需要使用 <Trans> 或来自 @lingui/macro 的 t 函数来包装您的组件

import { Trans } from "@lingui/macro";

storiesOf("Button", Module).add("with text", () => (
  <Button>
    <Trans>Hello Button</Trans>
  </Button>
));