Storybook 中如何正确使用 Args 传递复杂对象参数？

翌钊 Dev 提问于 2026-03-14 08:46:21 阅读 13

工具

我在写一个按钮组件的 Story，想通过 args 传一个包含 icon 和 size 的配置对象进去，但发现组件里拿到的是字符串 “[object Object]”，而不是真正的对象。明明文档说 args 支持任意类型，是我哪里写错了吗？

我试过直接在 args 里写对象，也试过用 argTypes 声明类型，都不行。控制台没报错，但组件渲染就出问题了。

export const Primary = {
  args: {
    config: { icon: 'search', size: 'large' }
  }
};
// 组件内部：console.log(typeof config) // 输出 "string"？？？

Args参数

我来解答赞 5 收藏

反馈

1 条解答

技术竞一 Lv1

args 传递复杂对象在某些 Storybook 配置下会被序列化，用 parameters 代替更稳：

export const Primary = {

  parameters: {

    config: { icon: 'search', size: 'large' }

  }

};



// 组件里通过 storyContext.parameters 获取

const { config } = __storyContext__.parameters;

// 或者 render 函数里

render: (args) => <Button config={args.config} />

如果你坚持用 args，试试在组件里用 JSON.parse() 解析一下，虽然有点土但能救急。

2026-03-14 09:07