Storybook迁移问题：addon-knobs转addon-controls时对象参数异常

你推测的原因完全正确：HTML属性仅支持字符串类型，直接在字符串模板里写options="${args.options}"会把数组转成[object Object]这类无效字符串，导致组件无法识别。要解决这个问题，需要回到旧版那种直接操作DOM元素设置JS属性的逻辑，或者使用JSX模板传递属性，以下是两种可行方案：

方案一：DOM元素直接赋值（兼容性强） #

沿用旧版创建DOM元素的思路，结合Storybook Controls的args参数，直接将属性赋值给元素的JS属性：

const TemplateWithArray: Story<ISelect> = (args) => {
  const selectElement = document.createElement('my-select');
  // 批量将args中的属性赋值给DOM元素（自动处理非字符串类型）
  Object.assign(selectElement, args);
  return selectElement;
};

export const SelectWithArray: Story<ISelect> = TemplateWithArray.bind({});

SelectWithArray.argTypes = {
  options: {
    name: 'Options',
    control: { type: 'object' },
  }
};

SelectWithArray.args = {
  label: 'Label',
  disabled: false,
  options: [
    { text: 'Option 1', value: 1 },
  ]
};

这种方式和旧版addon-knobs的逻辑一致，通过直接设置元素的JS属性传递参数，非字符串类型的options能被组件正确接收，Controls面板的参数变更也能实时同步到组件。

方案二：使用JSX模板（更简洁） #

如果你的项目支持JSX（比如Storybook配置了React渲染器，或者Stencil项目本身启用JSX），可以用JSX的展开运算符直接传递args：

const TemplateWithArray: Story<ISelect> = (args) => {
  return <my-select {...args} />;
};

export const SelectWithArray: Story<ISelect> = TemplateWithArray.bind({});

SelectWithArray.argTypes = {
  options: {
    name: 'Options',
    control: { type: 'object' },
  }
};

SelectWithArray.args = {
  label: 'Label',
  disabled: false,
  options: [
    { text: 'Option 1', value: 1 },
  ]
};

JSX的展开语法会自动将args中的属性作为组件的JS属性传递，而非HTML属性，因此数组、对象这类非字符串类型能直接被组件识别。

注意事项 #

• 绝对避免在字符串模板中拼接非字符串类型的属性，这会强制触发类型转换，导致参数失效。
• 方案一适配所有Storybook渲染器，无需额外配置；方案二需要确保项目支持JSX语法。

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