如何解决如何更改Storybook组件包装器名称?
我最近更新到了Storybook 6.0,并且正在玩controls。
我希望预览中的源代码反映实际的代码:
buttonArgs.stories.js
import React from 'react'
import { action } from '@storybook/addon-actions'
import { Button } from '../src/index'
export default {
title: 'ButtonArgs',component: Button,argTypes: {
type: {
description: 'Style type of button.',control: {
type: 'select',options: ['primary','secondary','tertiary'],},name: 'type',table: {
defaultValue: {
summary: 'primary',type: { type: 'select',required: true },text: {
description: 'Text value of the button.',table: {
defaultValue: {
summary: 'Button',type: { text: 'string',}
const Template = (args) => (
<div>
<Button onClick={action('onClick')} {...args} />
</div>
)
export const Default = Template.bind({})
Default.args = {
type: 'primary',text: 'Button',}
但是随后显示的“源代码”如下所示(参见图片):
<div>
<Wrapper
onClick={() => {}}
text="Button"
type="primary"
/>
</div>
有没有一种方法可以更改Wrapper
值以匹配代码(即“按钮”)?我通过他们的文档和GitHub进行了搜索,结果空白了。
解决方法
有两种有效的解决方案,具体取决于您对代码预览的偏好(可能会因情况而异)。
1.显示您编写的确切代码。
通过使用故事参数选项,您可以告诉 Storybook 完全按照您编写的代码呈现示例代码。
在您的示例中添加:
Default.parameters = {
docs: {source: {type: "code"}}
};
这样做的缺点是,它将完全按照您编写的方式显示(因此将显示 {...args} 而不是您控件中解析的道具)。
2.更正组件的显示名称
要更正组件的名称,最好重新编写代码,以便正确命名导入的组件。很可能您已使用名称 Button 编写组件,然后在应用 hocs 后将其分配给变量名称 Wrapper。这意味着导出的组件将具有默认显示名称“Wrapper”。相反,您可以将基础组件命名为“ButtonCore”,并将 HOC 包装的组件命名为“Button”。
或者,您可以在导出 Button 源文件之前或导入故事文件之后覆盖显示名称:
import { Button } from '../src/index'
Button.displayName = "Button";
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。