@storybookaddon-controls：如何不自动生成某个道具的控件

1个回答

Youapple

2025-06-30 13:10

如何不自动生成某个道具的控件

Storybook是一个用于开发和测试UI组件的工具，它提供了许多有用的插件和扩展，其中一个重要的插件是@storybook/addon-controls。这个插件可以自动生成控件来调整组件的属性和状态，但有时候我们可能不希望某个特定的道具（prop）生成控件。在本文中，我们将学习如何在Storybook中禁用某个道具的自动生成控件。

禁用特定道具的控件生成
当我们需要在Storybook中禁用某个道具的控件生成时，可以通过在.storybook/mAIn.JS配置文件中添加控制器选项来实现。首先，我们需要找到我们的配置文件，通常位于.storybook/mAIn.JS。在这个配置文件中，我们可以定义Storybook的各种选项和插件。
我们可以使用控制器选项来禁用特定道具的控件生成。在控制器选项中，我们可以指定哪些道具应该自动生成控件，哪些道具不应该自动生成控件。例如，如果我们有一个Button组件，其中有一个disabled道具，我们不希望自动生成控件，我们可以将disabled道具添加到控制器选项的exclude属性中。下面是一个示例配置文件的代码：
Javascript
module.exports = {
// ...其他配置选项
addons: [
// ...其他插件
{
name: '@storybook/addon-controls',
options: {
exclude: ['disabled'],
},
},
],
};
在上面的代码中，我们使用了options属性来指定控制器的选项。在options中，我们使用了exclude属性来指定不希望自动生成控件的道具。在这个例子中，我们将disabled道具添加到exclude数组中，这样就禁用了disabled道具的自动生成控件。
这样，当我们打开Storybook并查看Button组件时，将不会显示disabled道具的控件。
这是一个使用@storybook/addon-controls禁用控件生成的示例代码：
Javascript
import React from 'react';
import PropTypes from 'prop-types';
export const Button = ({ disabled, onClick, children }) => {
return (
<button disabled={disabled} onClick={onClick}>
{children}
</button>
);
};
Button.propTypes = {
disabled: PropTypes.bool,
onClick: PropTypes.func,
children: PropTypes.node,
};
Button.defaultProps = {
disabled: false,
onClick: () => {},
};
在上面的代码中，我们定义了一个Button组件，它接受disabled、onClick和children三个道具。在propTypes中，我们指定了这些道具的类型。在defaultProps中，我们定义了这些道具的默认值。
当我们在Storybook中使用Button组件时，disabled道具将不会自动生成控件，我们需要手动设置disabled的值。
这是一个使用禁用控件生成的Button组件的例子：
Javascript
import React from 'react';
import { Story, Meta } from '@storybook/react';
import { Button } from './Button';
export default {
title: 'Example/Button',
component: Button,
} as Meta;
const Template: Story = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
children: 'Primary Button',
};
export const Disabled = Template.bind({});
Disabled.args = {
children: 'Disabled Button',
disabled: true,
};
在上面的代码中，我们创建了一个Button组件的Story，并定义了两个不同的案例，Primary和Disabled。在Disabled案例中，我们手动设置了disabled道具的值为true，以禁用按钮。
通过上述方法，我们可以在Storybook中禁用某个道具的自动生成控件，从而更好地控制我们的UI组件的展示和测试。

通过@storybook/addon-controls插件，我们可以方便地在Storybook中生成控件来调整组件的属性和状态。然而，有时候我们可能希望禁用某个特定道具的控件生成。通过在配置文件中使用控制器选项的exclude属性，我们可以轻松地实现这一目标。这样，我们可以更好地控制我们的UI组件的展示和测试。

举报有用（4）分享收藏

@storybookaddon-controls：如何不自动生成某个道具的控件

1个回答

Youapple

热门话题

相关问题