问在Storybook中旋钮和控件有什么区别？
EN

Stack Overflow用户

提问于 2020-12-29 12:20:17

回答 2查看 3.4K关注 0票数 6

我是第一次接触这本故事书。当我浏览关于故事书的文档和视频时，我读到了关于旋钮插件的内容。旋钮插件和控件看起来很相似。这两件事有什么不同？

reactjs

storybook

回答 2

Stack Overflow用户

发布于 2021-01-25 17:54:02

控件是在Storybook版本6中引入的。它们在大多数用例中取代了旋钮。但是，如果您仍然希望对动态值使用旋钮，则可能存在某些边缘情况。例如，请参阅Github关于此主题的讨论：https://github.com/storybookjs/storybook/issues/11984

票数 5

Stack Overflow用户

发布于 2021-06-02 13:20:28

controls插件是docs addon的一个伴生插件，所以它与ArgsTable接口，这个插件本身就是设计用来自动提取组件的propTypes & defaultProps的(尽管我发现这不起作用)

因此，使用Knobs你可以自己手动定义每个道具(你希望它是动态的)，当你的组件改变时，这需要更多的手动同步，也需要更多的工作，而且Knobs变量定义可能分散在你的故事文件中，其中controls都定义在一个地方，尽管Knobs也可以完成相同的“顺序”，但它不强制执行它(有很好的理由)。

如果您想要为您的组件提供交互式 propTypes文档，那么我建议将controls与addon-docs一起使用，我已经使用knobs多年了，但仅此而已，是时候升级了。

如果，由于某些原因，你的组件的propTypes没有被自动检测到(在故事中)，那么你可以这样定义(用控件)：

import Alert from './';

export default {
    title: 'General/Alert',
    component: Alert,
    parameters: {
        controls: { expanded: true }, // Show full documentation for each property
    },
    argTypes: {
        type: {
            description: 'Alert.Types',
            defaultValue: Alert.Types.WARNING,
            table: {
                type: {
                    summary: 'string',
                },
                defaultValue: {
                    summary: Alert.Types.WARNING,
                },
            },
            options: Alert.Types,
            control: {
                type: 'select', // for selecting between the array of options above
            },
        },

        title: {
            defaultValue: '',
            table: {
                type: {
                    summary: 'string',
                },
            },
            description: 'An optional title',
            control: {
                type: 'text',
            },
        },

        onClose: {
            table: {
                type: {
                    summary: 'func',
                },
            },
            description: '× button click callback',
            control: { type: null },
        },

        children: {
            description: 'The message body (mandatory)',
            type : {
                required: true,
            },
            table: {
                type: {
                    summary: 'node',
                },
            },
            control: { type: null },
        },
    },
}

//...export your story...