如何更改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";

javascript reactjs reactjs storybook