如何在React Storybook装饰器中传递参数实现国际化翻译？

可以实现这个需求，Storybook的装饰器能接收包含当前story参数的StoryContext对象，你可以从中提取args里的参数传递给翻译装饰器，具体实现方式如下：

1. 调整单个Story的装饰器写法 #

装饰器的参数是StoryContext，其中包含当前story的所有args，你可以从中取出test参数，再传给你的storyWithTranslation装饰器：

export const Default: Story = {
  render: ({ test }) => {
    return (
      <TestComponent test={test} />
    );
  },
  args: {
    test: 'en-us',
  },
  // 正确传递参数的装饰器写法
  decorators: [
    (context) => {
      const { test } = context.args;
      // 将test参数传入翻译装饰器，再返回渲染结果
      return storyWithTranslation(test)(context);
    }
  ]
};

2. 确保翻译装饰器是高阶函数 #

你的storyWithTranslation需要是一个接收语言参数、返回Storybook装饰器的高阶函数，示例结构如下：

// 示例：storyWithTranslation的实现结构
const storyWithTranslation = (language: string) => (context: StoryContext) => {
  // 这里执行翻译初始化逻辑，比如切换i18n语言
  // i18n.changeLanguage(language);
  
  // 渲染原始story组件
  return context.story();
};

3. 全局装饰器的动态参数传递（可选） #

如果需要在全局Meta配置的装饰器中也动态使用test参数，同样可以用类似写法：

const stories: Meta = {
  title: '/TestComponent',
  component: TestComponent,
  decorators: [
    (context) => storyWithTranslation(context.args.test)(context)
  ],
  argTypes: {
     test: {
      options: ['us', 'jp', 'de'],
      control: { type: 'select' },
      defaultValue: 'us',
    },
  },
};

这样配置后，当你在Storybook面板切换test的下拉选项时，装饰器会自动获取最新的参数并更新翻译配置，实现动态切换语言的效果。

内容的提问来源于stack exchange，提问作者Raj