Storybook中Show code功能无法显示的问题求助

问题原因 #

你的故事代码中存在未定义变量（如handleClick、anchorEl、anchorHorizontal等），且未采用Storybook推荐的Args格式编写，导致代码生成器无法正确解析提取组件渲染代码，最终显示“No code is available”。

解决方案 #

1. 补全故事中缺失的变量定义 #

先补全所有用到的变量，确保代码可正常运行，同时让Storybook能追踪到变量的具体值：

import React, { useCallback, useState } from 'react';
import { MoreVertical, Repeat, Trash2, ExternalLink } from 'react-feather';
import { radios } from '@storybook/addon-knobs';
import { withMemoryRouter } from 'utils/wrapper';
import { useTranslation } from 'react-i18next';
import ActionMenu from '.';
import ContainerCenteredStorybook from '../storybook/ContainerCenteredStorybook';

export function ActionMenuExample() {
  // 补全状态与回调
  const [anchorEl, setAnchorEl] = useState(null);
  const { t } = useTranslation();

  const handleClick = useCallback((event) => {
    setAnchorEl(event.currentTarget);
  }, []);

  const handleClose = useCallback(() => {
    setAnchorEl(null);
  }, []);

  // 补全knobs配置
  const anchorHorizontal = radios('Anchor Horizontal', { Left: 'left', Right: 'right' }, 'left');
  const anchorVertical = radios('Anchor Vertical', { Top: 'top', Bottom: 'bottom' }, 'bottom');
  const transformHorizontal = radios('Transform Horizontal', { Left: 'left', Right: 'right' }, 'right');
  const transformVertical = radios('Transform Vertical', { Top: 'top', Bottom: 'bottom' }, 'top');

  // 补全菜单选项定义
  const items = [
    { label: t('Repeat'), icon: <Repeat />, onClick: handleClose },
    { label: t('Delete'), icon: <Trash2 />, onClick: handleClose },
    { label: t('Open in new tab'), icon: <ExternalLink />, onClick: handleClose },
  ];

  return (
    <ContainerCenteredStorybook>
      <>
        <MoreVertical onClick={handleClick} />
        <ActionMenu
          anchorEl={anchorEl}
          anchorOrigin={{
            horizontal: anchorHorizontal,
            vertical: anchorVertical,
          }}
          onClose={handleClose}
          items={items}
          transformOrigin={{
            horizontal: transformHorizontal,
            vertical: transformVertical,
          }}
        />
      </>
    </ContainerCenteredStorybook>
  );
}

ActionMenuExample.storyName = 'Action Menu';

export default {
  component: ActionMenu,
  decorators: [withMemoryRouter],
  title: 'Action Menu',
};

2. 改用Storybook Args格式编写故事（推荐） #

Args格式是官方推荐写法，能更好支持代码生成、控件交互等功能，改写后代码如下：

import React, { useCallback, useState } from 'react';
import { MoreVertical, Repeat, Trash2, ExternalLink } from 'react-feather';
import { withMemoryRouter } from 'utils/wrapper';
import ActionMenu from '.';
import ContainerCenteredStorybook from '../storybook/ContainerCenteredStorybook';

export default {
  component: ActionMenu,
  decorators: [withMemoryRouter],
  title: 'Action Menu',
  // 定义控件类型，方便在Storybook界面调整props
  argTypes: {
    anchorOrigin: {
      control: {
        type: 'object',
        default: { horizontal: 'left', vertical: 'bottom' },
      },
    },
    transformOrigin: {
      control: {
        type: 'object',
        default: { horizontal: 'right', vertical: 'top' },
      },
    },
    items: {
      control: { type: 'object' },
    },
    onClose: { action: 'closed' }, // 自动生成回调，界面显示触发日志
  },
};

// 通用模板组件
const Template = (args) => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = useCallback((event) => {
    setAnchorEl(event.currentTarget);
  }, []);

  return (
    <ContainerCenteredStorybook>
      <>
        <MoreVertical onClick={handleClick} />
        <ActionMenu {...args} anchorEl={anchorEl} />
      </>
    </ContainerCenteredStorybook>
  );
};

// 创建具体示例
export const ActionMenuExample = Template.bind({});
ActionMenuExample.storyName = 'Action Menu';
// 定义默认props值
ActionMenuExample.args = {
  anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
  transformOrigin: { horizontal: 'right', vertical: 'top' },
  items: [
    { label: 'Repeat', icon: <Repeat />, onClick: () => {} },
    { label: 'Delete', icon: <Trash2 />, onClick: () => {} },
    { label: 'Open in new tab', icon: <ExternalLink />, onClick: () => {} },
  ],
};

3. 检查并配置Storybook Docs插件 #

Show Code功能依赖@storybook/addon-docs插件，确保已安装并配置：

• 安装插件：

npm install @storybook/addon-docs --save-dev
# 或
yarn add @storybook/addon-docs --dev

• 在.storybook/main.js中添加插件：

module.exports = {
  addons: [
    '@storybook/addon-docs',
    // 其他已有的addons...
  ],
};

4. 重启Storybook服务 #

修改配置或代码后，重启Storybook服务确保更改生效。

内容的提问来源于stack exchange，提问作者Antonio Pavicevac-Ortiz