Storybook将Story作为children参数传入时报bound Template错误如何解决

错误原因 #

你当前使用的CSF 2.0格式中，通过Template.bind({})生成的导出对象是Storybook的Story元数据对象，并非合法的React函数组件，直接当做组件调用就会抛出bound Template cannot be used as component错误，和官方示例的差异是官方示例基于CSF 3.0语法实现。

正确实现方式 #

有两种通用可行方案：

方案1：复用Story参数调用原始组件（兼容性最好） #

不需要调整Storybook配置，直接修改checkFormField.stories.tsx逻辑，导入原始Checkbox组件复用已定义的story参数即可：

// checkFormField.stories.tsx
import { Meta, Story } from '@storybook/react';
import CheckFormField from '@components/old/signup/organisms/checkFormField/index';
import { CheckboxProps } from '@components/old/signup/molecules/checkbox/interfaces';
// 导入原始Checkbox组件
import Checkbox from '@components/old/signup/molecules/checkbox/index';
// 导入已定义的story参数
import { DefaultCheckbox } from '@components/old/signup/molecules/checkbox/checkbox.stories';

export default {
  title: 'checkFormField',
  component: CheckFormField,
} as Meta;

const Template: Story = (args) => <CheckFormField {...args}/>

export const OneItem = Template.bind({})
OneItem.args = {
  children: [<Checkbox {...DefaultCheckbox.args as CheckboxProps}/>]
}

方案2：升级为CSF 3.0语法和配置 #

如果要完全对标官方示例的写法，需要做两处调整：

1. 确认Storybook版本 >= 6.4，在.storybook/main.js中开启CSF3支持：

// .storybook/main.js
module.exports = {
  features: {
    previewCsf3: true,
  },
  // 其余原有配置保持不变
}

2. 所有关联的stories文件改用CSF 3.0格式编写，以checkbox.stories.tsx为例：

// checkbox.stories.tsx
import { Meta, StoryObj } from '@storybook/react';
import Checkbox from '@components/old/signup/molecules/checkbox/index';
import { CheckboxProps } from '@components/old/signup/molecules/checkbox/interfaces';

const meta: Meta<typeof Checkbox> = {
  title: 'checkbox',
  component: Checkbox,
};
export default meta;

type Story = StoryObj<CheckboxProps>;

export const DefaultCheckbox: Story = {
  args: {
    id: 'test',
    labelText: 'Default Checkbox',
    tabIndex: 0,
    checked: false,
    isDiners: false,
  },
};

调整完成后你原本的children: [<DefaultCheckbox {...DefaultCheckbox.args as CheckboxProps}/>]写法即可正常运行，无额外参数需要覆盖时还可以省略参数传递，直接写<DefaultCheckbox/>即可。

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