Storybook 自动生成 React 组件的文档/属性描述的问题

Question

我的是一个较旧的存储库（想想Webpack 3.*）。我在回购中添加了故事书，并为我的.scss文件修改了一些WebPack规则以正确加载。

我可以让故事书控件正确加载。但是，文档部分中的argstable不尊重我在proptypes中给出的评论。

这是我的组件 - newpill.js

import styles from './NewPill.scss';

const NewPill = props => {
    const { text, color } = props;
    return <span className={`${styles.newPill} ${color}`}> {text} </span>;
};

NewPill.propTypes = {
    /**
     * Denotes the text of the pill
     */
    text: PropTypes.string,
    /**
     * Denotes the color of the pill
     */
    color: PropTypes.string,
};

export default NewPill;

这是我的故事 - newpill.stories.js

import NewPill from './NewPill';

export default {
    title: 'Components/NewPill',
    component: NewPill,
};

const Template = args => {
        console.log(NewPill.__docgenInfo); // Gives me undefined
    return <NewPill {...args} />;
};

export const FirstStory = Template.bind({});
FirstStory.args = {
    text: 'Pill Text',
    color: 'blue',
};

，这是输出，

显然，实际上是为故事本身添加argtypes。

FirstStory.argTypes = {
    text: {
           control: { type: 'text' },
           description: 'Denotes the text of the pill',
        }
    color: 'blue',
};

但是，如果故事书系统从原始组件本身获取该信息，那就太好了。有没有办法查看babel-plugin-react-docgen是否有效？我按照他们的说明在这里

Answer 1

我有完全相同的问题。问题出在您使用的版本上。
将 Storybook 降级到 v 6.3.0 解决了我的问题。

PS：必须逐一降级软件包（像这样 npx [email  ;protected] init 无法按预期工作）。