Storybook v7/v8展示代码页不显示React组件标记求助

自升级至Storybook v7再到v8后，文档页的「Show code」标签不再显示故事对应的React组件JSX标记，仅展示用于渲染故事的args。已查阅相关帖子、Storybook文档及GitHub内容，未找到解决方法。

以下是示例代码及配置：

组件代码 #

import classNames from 'classnames';
import { memo, MouseEvent } from 'react';

import { decapitalizeFirstLetter } from '@helpers/stringHelper';

import { PadlockIcon } from '@icons';

import styles from './AccessControlIndicator.less';
import Msg from './AccessControlIndicator.msg';
import { Access } from './types';

function AccessControlIndicator({
    access,
    className,
    'data-testid': testId = 'AccessControlIndicator',
    displaySurround = false,
    isReadOnly = false,
    onClick,
}: {
    access: Access;
    className?: string;
    'data-testid'?: string;
    displaySurround?: boolean;
    isReadOnly?: boolean;
    onClick?: (e: MouseEvent) => void;
}) {
    let icon = null;

    switch (access) {
        case Access.None:
        case Access.Restricted:
        case Access.RestrictedAuto:
            icon = <PadlockIcon className={styles.icon} />;
            break;
        case Access.All:
        default:
            icon = null;
            break;
    }

    return (
        <button
            className={classNames(
                styles.root,
                displaySurround && styles.surround,
                isReadOnly && styles.readOnly,
                className,
            )}
            data-state={access}
            data-testid={testId}
            disabled={isReadOnly}
            onClick={!isReadOnly ? onClick : undefined}
        >
            {icon}
            <span className={styles.label}>
                <Msg s="label" />
            </span>
            <span className={styles.access}>
                <Msg s={decapitalizeFirstLetter(access)} />
            </span>
        </button>
    );
}

export default memo(AccessControlIndicator);

Story代码 #

import { Meta, StoryObj } from '@storybook/react';

import AccessControlIndicator from './AccessControlIndicator';
import { Access } from './types';

const meta: Meta<typeof AccessControlIndicator> = {
    component: AccessControlIndicator,
    title: 'AccessControlIndicator',
    argTypes: {
        access: {
            options: Object.keys(Access),
            mapping: Access,
            control: {
                type: 'inline-radio',
            },
        },
    },
};

export default meta;

type Story = StoryObj<typeof AccessControlIndicator>;

const defaultArgs = {
    access: Access.None,
    displaySurround: false,
    isReadOnly: false,
};

export const Default: Story = {
    args: defaultArgs,
};

当前「Show code」显示效果 #

配置片段 #

main.ts #

addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-links',
    'storybook-addon-pseudo-states',
    '@storybook/addon-webpack5-compiler-babel'
],
core: {},
docs: {
    autodocs: true,
},
framework: {
    name: '@storybook/react-webpack5',
    options: {
        builder: {
            fsCache: true,
            lazyCompilation: false,
        },
    },
},

preview.ts #

docs: {
    source: {
        language: 'tsx',
    },
},

期望能看到生成的React标记，以便其他开发者直接复制使用，请问遗漏了什么配置？

解决方法 #

方法1：给故事显式添加render函数 #

在Story文件中，为每个故事定义render函数，直接返回组件的JSX调用代码：

export const Default: Story = {
  render: (args) => <AccessControlIndicator {...args} />,
  args: defaultArgs,
};

添加后，「Show code」会直接展示你在render中编写的JSX代码，而非仅显示args对象。

方法2：修改Preview配置强制切换代码显示模式 #

在preview.ts的docs.source配置中，添加type: 'code'，强制Storybook展示组件的JSX代码，还可以通过transform函数自定义代码生成逻辑：

docs: {
  source: {
    language: 'tsx',
    type: 'code', // 切换到代码显示模式
    // 可选：自定义生成符合业务场景的JSX代码
    transform: (_, storyContext) => {
      const { args } = storyContext;
      return `<AccessControlIndicator
  access={Access.${args.access}}
  displaySurround={${args.displaySurround}}
  isReadOnly={${args.isReadOnly}}
/>`;
    },
  },
},

说明 #

Storybook v7+ 默认对仅用args定义的故事，会在「Show code」中展示args对象，目的是突出组件的可配置参数。如果需要提供可直接复制使用的JSX代码，上述两种方法都可以实现：

• 方法1更灵活，适合需要自定义渲染逻辑的场景；
• 方法2适合批量统一调整所有故事的代码显示格式。

内容的提问来源于stack exchange，提问作者emerson.marini