Storybook react-intl 插件

为 Storybook 添加 react-intl 支持。

所需版本

v3.1.x

• storybook - ^8.2.0
• react-intl - ^5.24.0 || ^6.0.0

v3.0.x

• storybook - ^8.0.0
• react-intl - ^5.24.0 || ^6.0.0

此 Storybook 插件假设您的项目已使用 react-intl 设置，并且已正确配置并运行。

安装

此插件应作为开发依赖项添加。

npm i -D storybook-react-intl

yarn add -D storybook-react-intl

如果您的项目尚未安装 react-intl，则需要将其作为依赖项安装。

npm i -S react-intl

yarn add react-intl

用法

安装后，请按照以下步骤在 Storybook 中启用此插件。

main.ts

将此插件插入您的 addons 数组中

{
  addons: [
    // other addons...
    'storybook-react-intl',
  ]
}

---

reactIntl.ts

在您的 .storybook 文件夹中创建一个名为 reactIntl.ts 的文件（或任何您喜欢的名称）。您将在其中设置 react-intl 配置。

在此文件中，复制并粘贴以下代码，并根据需要进行修改。

const locales = ['en', 'de'];

const messages = locales.reduce((acc, lang) => ({
  ...acc,
  [lang]: require(`../locale/${lang}.json`), // whatever the relative path to your messages json is
}), {});

const formats = {}; // optional, if you have any formats

export const reactIntl = {
  defaultLocale: 'en',
  locales,
  messages,
  formats,
};

---

preview.ts

在您的 preview.ts 中，您需要将 locales 和 locale 添加到 initialGlobals（如果您未使用 storybook 8.2+，则为 globals），并将您从上述文件中导出的 reactIntl 添加到 parameters 中。

locales 是一个对象，其中键是语言环境/语言的“ID”，值是您希望在下拉列表中显示的名称。

locale 是默认语言环境，可以从 reactIntl 读取，也可以根据您的选择手动设置。

import {reactIntl} from './reactIntl';

const preview: Preview = {
    initialGlobals: {
        locale: reactIntl.defaultLocale,
        locales: {
            en: 'English',
            de: 'Deutsche',  
        },
    },
    parameters: {
        reactIntl,
    }
};

export default preview;

您还可以将语言环境设置为 Storybook 兼容的对象，如 storybook-i18n 插件（包含在此插件中）中所述。

import {reactIntl} from './reactIntl';

const preview: Preview = {
    initialGlobals: {
        locale: reactIntl.defaultLocale,
        locales: {
            en: {icon: '🇺🇸', title: 'English', right: 'EN'},
            fr: {icon: '🇫🇷', title: 'Français', right: 'FR'},
            ja: {icon: '🇯🇵', title: '日本語', right: 'JP'},
        },
    },
    parameters: {
        reactIntl,
    }
};

export default preview;

Story 参数语言环境

如果要让某个故事使用特定的语言环境，请在该故事的参数中设置它。

export const Default: StoryObj = {
    render: () => <YourComponent/>,
};

export const Japanese: StoryObj = {
    parameters: {
        locale: 'ja',
    },
    render: () => <YourComponent/>,
};

请注意，执行此操作会将当前语言环境切换到参数语言环境，因此当您切换到没有参数的故事时，它将保留在上次选择的语言环境中。

在上面的示例中，如果您查看日语故事，然后单击返回“默认”故事，则语言环境将保持 ja。

---

完成这些步骤并启动 Storybook 后，您应该会在工具栏中看到一个地球图标。

单击此地球图标将显示一个包含您定义的语言环境的下拉列表。

切换语言环境将使用您在消息中定义的字符串。