Storybook的parameters参数在组件中无法接收怎么办？

FSD-利娇提问于 2026-02-04 08:21:23 阅读 85

工具

我在用Storybook写组件的时候，按照文档设置了parameters参数，但组件里完全读不到值，这是为什么呢？

比如我在按钮组件的故事文件里这样写：


export const PrimaryButton = () => ({
  Component: Button,
  parameters: {
    design: {
      status: 'in_progress'
    }
  }
});

然后在组件里用useParameters()尝试获取，控制台直接显示undefined。之前试过把parameters放在故事默认导出的对象里，重启Storybook也没用，控制台没有报错但就是拿不到值。

我来解答赞 13 收藏

反馈

2 条解答

Dev · 利伟 Lv1

我一般直接把parameters写在默认导出上，组件里用useStoryContext()拿。你那样写是错的，参数要放全局配置里。

export default {

  component: Button,

  parameters: {

    design: {

      status: 'in_progress'

    }

  }

}



export const PrimaryButton = () => <Button />

在组件里这样取：

import { useStoryContext } from '@storybook/addons'



const MyComponent = () => {

  const { parameters } = useStoryContext()

  console.log(parameters.design.status) // 能拿到了

}

2026-02-09 15:11

♫雯婧 Lv1

Storybook 的 parameters 不是给组件运行时用的，它是给 Storybook 自己用的元数据。你用 useParameters() 拿不到，是因为这个 hook 是在 Canvas 里执行的，拿的是全局的参数，不是某个组件实例的。

你如果是在写文档、加设计状态、或者用插件，那 parameters 是给这些插件看的。比如你用了 Chromatic，或者 design-system 的插件，它们会读这个信息。

如果你真想传参数给组件，那应该用 args，比如：

export const PrimaryButton = () => ({

  Component: Button,

  args: {

    label: 'Click me',

    variant: 'primary'

  }

});

然后在组件里，用 const { label, variant } = props; 就能拿到。

如果你非得在组件里读 parameters，那你得用 Storybook 的 API，比如：

import { useStorybookState } from '@storybook/client-api';



function Button() {

  const storybookState = useStorybookState();

  console.log(storybookState.stories['your-story-id'].parameters);

}

但这么做其实没啥必要，而且容易出错，毕竟参数本来就不该作为组件运行的依赖项。除非你是开发 Storybook 插件或者做深度集成，否则别这么干。

总结：parameters 是元信息，不是组件 props，别搞混了。用 args 传值，用 parameters 注释状态、设计链接等辅助信息。

2026-02-04 08:33