使用孩子作为参数的故事书会引发错误“绑定模板不能用作组件”

Question

根据 Storybook 的文档： https ://storybook.js.org/docs/react/workflows/stories-for-multiple-components

// List.stories.ts | List.stories.tsx

import React from 'react';

import { List, ListProps } from './List';

// Instead of importing ListItem, we import the stories
import { Unchecked } from './ListItem.stories';

const Template: Story<ListProps> = (args) => <List {...args} />;

export const OneItem = Template.bind({});
OneItem.args = {
  children: <Unchecked {...Unchecked.args} />,
};

就像 React 元素一样，故事也可以用于儿童。

但是，我的代码遵循文档示例，但在下面抛出错误。

bound Template cannot be used as component.

我的代码：

// 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';

// Instead of importing ListItem, we import the stories
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: [<DefaultCheckbox {...DefaultCheckbox.args as CheckboxProps}/>]
}

// checkbox.stories.tsx

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

export default {
  title: 'checkbox',
  component: Checkbox,
} as Meta;

const Template: Story<CheckboxProps> = (args) => <Checkbox {...args} />;

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

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

我知道警告如下：

• Avoid using empty values
  

• Use caution with components that include third party libraries
  

因为它们可能会导致您的故事书出现错误。

但我只是想知道我是否错过了什么以及实施的方式。

提前致谢。

Answer 1

就我而言，映射正是我所需要的（Storybook 6.2+）：

Text.stories.tsx

const meta: Meta<typeof Text> = {
  title: "Text",
  component: Text,
  argTypes: {
    children: {
      options: ['Normal', 'Bold', 'Italic'],
      mapping: {
        Normal: <span>Normal</span>,
        Bold: <b>Bold</b>,
        Italic: <i>Italic</i>,
      },
    },
  },
};