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

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

工具

我在写一个按钮组件的 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 收藏

反馈

2 条解答

W″倚凡 Lv1

你在使用 Storybook 的 Args 传递复杂对象参数时遇到的问题，原理是这样的：Storybook 在处理 Args 的时候，默认会将对象转换为 JSON 字符串，然后在组件内部再解析这个字符串。这就是为什么你在组件内部看到的是 "[object Object]" 而不是真正的对象。

我们可以通过以下步骤来解决这个问题：

1. 首先，确保你的组件能够正确接收和处理对象类型的 props。假设你的按钮组件接受一个 config prop，它应该能够解析这个对象。

2. 在你的 Story 文件中，确保正确地定义 argTypes，特别是对于复杂的对象类型。虽然你提到尝试过用 argTypes 声明类型，但是可能需要进一步配置来确保对象被正确传递。

3. 使用 control 类型为 'object' 来明确告诉 Storybook 你的 config 是一个对象。这样可以确保在控制面板中也能正确显示和编辑这个对象。

4. 最后，确保在你的组件内部正确地解构或使用 config 对象。

下面是具体的代码示例：

import Button from './Button'; // 假设这是你的按钮组件



export default {

  title: 'Components/Button',

  component: Button,

  argTypes: {

    config: {

      control: { type: 'object' }, // 明确告诉 Storybook 这是一个对象

      description: 'Configuration object for the button, including icon and size',

    },

  },

};



const Template = (args) => <Button {...args} />;



export const Primary = Template.bind({});

Primary.args = {

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

};



// 在你的 Button 组件内部

// function Button({ config }) {

//   console.log(config); // 这里应该打印出对象 { icon: 'search', size: 'large' }

//   return (

//     <button className={btn btn-${config.size}}>

//       <i className={icon ${config.icon}}></i>

//       Click Me

//     </button>

//   );

// }

在这个例子中，我们在 argTypes 中设置了 control 类型为 'object'，这告诉 Storybook 你的 config 参数是一个对象。这样，当你在 Storybook 中查看和编辑 config 参数时，它会作为一个对象来处理，而不是被转换为字符串。

希望这能解决你的问题！如果还有其他疑惑，尽管问我。有时候这些小细节真的挺让人抓狂的。

2026-03-22 23:03

技术竞一 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