Storybook：无法使展示代码工作

1. 确认是否安装了正确的插件。

在 .storybook/main.js 中，要确保 addons 选项包含 storybook/addon-actions、storybook/addon-links、storybook/addons 和@storybook/preset-create-react-app 这些插件。

2. 确认是否正确使用 Show Source addon。

Show Source addon 应该是唯一一个可以返回解决方案并帮助展示代码的插件。应该像这样使用它：

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from './Button';
import { withKnobs, text } from '@storybook/addon-knobs';

export default {
  title: 'Button',
  component: Button,
  decorators: [withKnobs],
};

export const withText = () => {
  const label = text('Label', 'Hello Storybook');
  return <Button onClick={action('clicked')} label={label} />;
};

export const withEmoji = () => {
  const label = text('Label', '� � � �');
  return (
    <Button onClick={action('clicked')} label={label}>
      <span role="img" aria-label="so cool">
        � � �
      </span>
    </Button>
  );
};
export const showButton = () => (
  <div>
    <Button onClick={action('clicked')}>Hello Button</Button>
    <br />
    <br />
    {/* include <code>name</code> props for consistency */}
    <Button onClick={action('clicked')} name="Foo">
      Foo
    </Button>
    <br />
    <br />
    <Button onClick={action('clicked')} name="Bar">
      Bar
    </Button>
  </div>
);

showButton.story = {
  name: 'Show source code',
  parameters: { docs: { page: null }, storySource: { source: '<Button>Click Me!</Button>' } },
};

注意：在 showButton.story 中，parameters 属性包含发布到页面和源代码的详细信息。

3. 确认